[英]How can I vertically align the text in an anchor tag?
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: 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. 任何输入都表示赞赏。
Add line-height:40px;
添加line-height:40px;
to your div a#drop class 给你的div一个#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;
}
To vertically center you could use display:table-cell; 要垂直居中,你可以使用display:table-cell; in combination with vertical-align:middle; 与vertical-align:middle结合使用;
Like this: 像这样:
http://jsbin.com/oyoqap/1/edit http://jsbin.com/oyoqap/1/edit
a {
display:table-cell;
height:100px;
border:solid;
vertical-align:middle;
}
First of all, your anchor tags are the first elements inside the div, are block elements and are displayed first; 首先,你的锚标签是div中的第一个元素,是块元素并首先显示; is there a reason to have position:relative on them? 有没有理由有位置:相对他们?
Instead of giving them a height, try adding padding-top and padding-bottom instead. 而不是给它们一个高度,而是尝试添加填充顶部和填充底部。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.