html - How can I vertically align the text in an anchor tag?

Question

The question is simple enough: how can I vertically align the text in an anchor tag?

Here's a picture of what's going on:

Specifically, note "Publisher Search," "Add a New Publisher," and "Edit a Publisher." I want the text to be vertically aligned within the "bar."

This is the code:

<div id="content">

    <div id="pub1">
        <form id="pub-form1">
            All Members: <input type="radio" name="preference" />
            Current Members: <input type="radio" name="preference" checked/>
            Members with User Priveleges: <input type="radio" name="preference" />
        </form>
    </div>

    <div id="pub2">
        <a href="#" id="drop">Publisher Search</a>
        <form id="pub-form2">
            Firstname: <input type="text" name="fName" />
            Lastname: <input type="text" name="lName" />
        </form>
    </div>

    <div id="pub3">
        <a href="#" id="drop">Add a New Publisher</a>
        <form id="pub-form3">   
            Firstname: <input type="text" name="fName" />
            Lastname: <input type="text"  name="lName" />
        </form>

   </div>

   <div id="pub4">
        <a href="#" id="drop">Edit a Publisher</a>
        <form id="pub-form4">
            Firstname: <input type="text" name="fName" />
            Lastname: <input type="text" name="lName" />
        </form>
   </div>

   <div id="results">
   </div>


</div>

The CSS:

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;
} 

Any input is appreciated.

Answer 1

Add line-height:40px; to your div a#drop class

FIDDLE

div a#drop {
  display: block;
  background-color: #283744;
  width: 70%;
  position: relative;
  color:#fff;
  height: 40px;
  line-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;
}

Answer 2

To vertically center you could use display:table-cell; in combination with vertical-align:middle;

Like this:

http://jsbin.com/oyoqap/1/edit

a {
  display:table-cell;
  height:100px;
  border:solid;
  vertical-align:middle;
}

Answer 3

First of all, your anchor tags are the first elements inside the div, are block elements and are displayed first; is there a reason to have position:relative on them?

Instead of giving them a height, try adding padding-top and padding-bottom instead.