title: HTML/CSS: How do I Align The Border Of Text To An Image?
body: <p>This has been bothering me for a while. I have currently <code>vertically align a border</code> contain the word <code>"Facebook"</code> to an image but, vertical align isn't completely centering the word with the image.</p>
  
  <p><em>Update 1</em>: I am using <code>Width 100% and Line-Height 100%</code>. This is close to how I want it but not quite. <a href="https://gyazo.com/f67cff590476c9e11601172b5b1dafd5" rel="nofollow">https://gyazo.com/f67cff590476c9e11601172b5b1dafd5</a> I want the border and the image to align. Here is my old code: </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="div06"&gt;
      &lt;img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/&gt;
      &lt;span id="span01"&gt;Facebook&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#div06
  {
      margin-top:3%;
      display:inline-block;
      width:100%;
      line-height:100%;
  }
  #img01{
      width:10%;
      vertical-align:middle;
  }
  #span01
  {
      border:3px solid blue;
      padding: 35px;
      margin: 25;
  }
  </code></pre>
  
  <p>Here is my current edit:</p>
  
  <pre><code>#div06{
    margin-top:3%;
    width:100%;
    line-height:100%;
  }
  #img01{
      width:10%;
      vertical-align:middle;
  }
  #span01{
      border:3px solid #3b5998;
      color:#000000;
      font-family:arial, bold;
      font-size: 30px;
      padding: 35px;
      margin: 25;
  }
  </code></pre>
  
  <p>It is vertically aligned in the full version but visually it's not (<a href="https://gyazo.com/f67cff590476c9e11601172b5b1dafd5" rel="nofollow">https://gyazo.com/f67cff590476c9e11601172b5b1dafd5</a> In this screenshot, the text does center align but the order doesn't. How do I make the border align?). I want them to align. If it is visually vertical for you then this problem only exists with the full version. I think it might be the image but, I don't know. How Do I fix this?</p>
  
  <p>Also if you need the full code I will provide it below.</p>
  
  <hr>
  
  <p><strong>Full Code</strong></p>
  
  <hr>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;head&gt;
      &lt;!--
      Assignment: Personal Website
      Date:  10/4/16
      Name:  Bradley Elko
      --&gt;
      &lt;link rel="stylesheet" href="personalWeb1.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="div01"&gt;
          &lt;h1 id="h101"&gt;Bradley's Website&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div id="div02"&gt;
          &lt;h3 id="h301"&gt;&lt;a href="personalWeb1.html" id="a01" style="text-decoration:none"&gt;My Band&lt;/a&gt;&lt;/h3&gt;
          &lt;h3 id="h302"&gt;&lt;a href="personalWeb1.html" id="a01" style="text-decoration:none"&gt;My Handlers&lt;/a&gt;&lt;/h3&gt;
          &lt;h3 id="h303"&gt;&lt;a href="personalWeb1.html" id="a01" style="text-decoration:none"&gt;My Ideas&lt;/a&gt;&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div id="div03"&gt;
          &lt;div id="div04"&gt;
              &lt;h2 id="h201"&gt;Formal Unknown Cereal Killer&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div id="div05"&gt;
              &lt;p id="p01"&gt;Date: 10/05/2016 (Latest Update)
              &lt;blockquote&gt;
                  Summary:
                  &lt;br/&gt;
                  &lt;br/&gt;
                  Formal Unknown Cereal Killer is a band I made on September 30th, 2016. I don't have anyone else in it, but I will keep trying to get more members. The band will be a metalcore band(a rock genre). I may implement other instruments into the band (such as a violin, flute, clarenet, or another unique instrument). If you want to keep up to date check us out. The links are down below.
              &lt;/blockquote&gt;
              &lt;div id="div06"&gt;
                  &lt;img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/&gt;
                  &lt;span id="span01"&gt;Facebook&lt;/span&gt;
              &lt;/div&gt;
              &lt;div id="div07"&gt;
                  &lt;img id="img02" src="https://pbs.twimg.com/profile_images/767879603977191425/29zfZY6I.jpg"/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>a:link{
      color:#1a0000;
      border-right:2px solid;
      border-left:2px solid;
      padding:5;
  }
  a:visited{
      color:#950f0f;
  }
  a:hover{
      color:red;
  }
  a:focus{
      color:#eeeedd;
  }
  #div01 {
      position:fixed;
      top:0px;
      left:0px;
      right:0px;
      height:80px;
      bottom:90%;
      font-family:Arial, Helvetica, sans-serif;
      font-size:25px;
      background-color:#73778c;
      color:#950f0f;
      text-align:center;
      border-top:3px solid #950f0f;
      border-bottom:2px solid #950f0f;
      padding-top:0;
      display:inline-block;
  }
  #h101{
      margin-top:10;
      margin-bottom:10;
  }
  #div02{
      position:fixed;
      top:85px;
      left:0px;
      right:0px;
      display:inline-block;
      background-color:#73778c;
      color:#950f0f;
      border-bottom:2px solid #950f0f;
      text-align:center;
      padding-top:5;
      padding-bottom:5;
      font-family:verdana;
      font-size:12px;
  }
  #h301{
      display:inline;
  }
  #h302{
      margin-left :20%;
      margin-right:20%;
      display:inline;
  }
  #h303{
      display:inline;
  }
  #div03{
      position:fixed;
      padding-top:0;
      top:114px;
      left:0%;
      right:0%;
      bottom:0%;
      background-color:#73778c;
      color:#950f0f;
      border-bottom:3px solid #950f0f;
  }
  #div04{
      font-size:30;
      text-align:center;
      margin-top:-30;
  }
  #h201{
      font-family:Times New Roman;
  }
  #div05{
      margin-left:100;
      margin-right:100;
      margin-bottom:100;
      margin-top:-30;
      padding-top:10;
      padding-bottom:10;
      padding-left:30;
      padding-right:20;
      border:3px solid #950f0f;
      background-color:#e0e0d1;
  }
  #div06{
      margin-top:3%;
      display:inline-block;
      width:100%;
      line-height:100%;
  }
  #div07{
      margin-top:3%;
  }
  #img01{
      width:10%;
      vertical-align:middle;
  }
  #span01{
      border:3px solid blue;
      padding: 35px;
      margin: 25;
  }
  #img02{
      width:10%;
  }
  </code></pre>
  
  <p>Also (If you get this far you don't have to answer this. I'm just curious), how do you get Fullscreen inspect elements? Whenever I use it, it takes up a portion of the page that displays the portion of the website, but I want it to display the Fullscreen results [(This has been answered)].</p>