1

質問は簡単です: アンカー タグ内のテキストを垂直方向に揃えるにはどうすればよいですか?

何が起こっているかの写真は次のとおりです。

ここに画像の説明を入力

具体的には、「発行者の検索」、「新しい発行者の追加」、および「発行者の編集」に注意してください。「バー」内でテキストを縦に揃えたい。

これはコードです：

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

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

どんな入力でも大歓迎です。

4

3 に答える 3

2

line-height:40px;div a#drop クラスに追加します

フィドル

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;
}
于 2013-07-10T21:29:40.103 に答える