title: How can I vertically align the text in an anchor tag?
body: <p>The question is simple enough: how can I vertically align the text in an anchor tag? </p>
  
  <p>Here's a picture of what's going on:</p>
  
  <p><img src="https://i.stack.imgur.com/BPE4h.png" alt="enter image description here"></p>
  
  <p>Specifically, note "Publisher Search," "Add a New Publisher," and "Edit a Publisher." I want the text to be vertically aligned within the "bar." </p>
  
  <p>This is the code:</p>
  
  <pre><code>&lt;div id="content"&gt;
  
      &lt;div id="pub1"&gt;
          &lt;form id="pub-form1"&gt;
              All Members: &lt;input type="radio" name="preference" /&gt;
              Current Members: &lt;input type="radio" name="preference" checked/&gt;
              Members with User Priveleges: &lt;input type="radio" name="preference" /&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  
      &lt;div id="pub2"&gt;
          &lt;a href="#" id="drop"&gt;Publisher Search&lt;/a&gt;
          &lt;form id="pub-form2"&gt;
              Firstname: &lt;input type="text" name="fName" /&gt;
              Lastname: &lt;input type="text" name="lName" /&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  
      &lt;div id="pub3"&gt;
          &lt;a href="#" id="drop"&gt;Add a New Publisher&lt;/a&gt;
          &lt;form id="pub-form3"&gt;   
              Firstname: &lt;input type="text" name="fName" /&gt;
              Lastname: &lt;input type="text"  name="lName" /&gt;
          &lt;/form&gt;
  
     &lt;/div&gt;
  
     &lt;div id="pub4"&gt;
          &lt;a href="#" id="drop"&gt;Edit a Publisher&lt;/a&gt;
          &lt;form id="pub-form4"&gt;
              Firstname: &lt;input type="text" name="fName" /&gt;
              Lastname: &lt;input type="text" name="lName" /&gt;
          &lt;/form&gt;
     &lt;/div&gt;
  
     &lt;div id="results"&gt;
     &lt;/div&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    height: 100%;
    background: url(../Images/bg.jpg)
  }
  
  body {
    height: 100%;
    overflow-y: hidden;
    padding: 0;
    margin: 0;
  }
  
  #content {
    width: 900px;
    height: 100%;
    margin : 0 auto;
    background: #FFF;
  }
  
  div a#drop {
    display: block;
    background-color: #283744;
    width: 70%;
    position: relative;
    color:#fff;
    height: 40px;
    padding-left: 20px;
    font-size: 11pt;
    font-family: 'PT Sans', Arial, sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 1px 1px 0px #283744;
  }
  
  div a#drop:after {
        content:"";
        background: url(../Images/1373497280_arrow_state_grey_expanded.png) no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
  } 
  </code></pre>
  
  <p>Any input is appreciated.</p>