Question

问题很简单：如何在锚标记中垂直对齐文本？

这是一张正在发生的事情的图片：

enter image description here

具体来说，请注意“发布商搜索”，“添加新发布商”和“编辑发布商”。我希望文本在“条形图”中垂直对齐。

这是代码：

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

赞赏任何意见。

Answer 1

将line-height:40px;添加到您的div＃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

要垂直居中，可以使用display：table-cell;与vertical-align：middle;

结合使用

像这样：

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

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

Answer 3

首先，你的锚标签是div中的第一个元素，是块元素并首先显示;有没有理由有位置：相对于他们？

不要给它们一个高度，而是尝试添加填充顶部和填充底部。

如何在锚标记中垂直对齐文本？

3 个答案: