Html div内的垂直对齐链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21611404/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
vertical align link inside div
提问by xolsiion
I've created some floating buttons and a link that fills the whole button. However, vertical alignment doesn't seem to apply - the link text always stays at the top of the button <li>.
我创建了一些浮动按钮和一个填充整个按钮的链接。但是，垂直对齐似乎并不适用 - 链接文本始终位于按钮的顶部<li>。
Here's a fiddle example: http://jsfiddle.net/su7nf/
这是一个小提琴示例：http: //jsfiddle.net/su7nf/
<div id="ButtonContainer">
<ul>
<li>
<div class="TemplateButton"><a href="http://www.google.com">Report an Issue</a></div>
</li>
<li>
<div class="TemplateButton"><a href="http://www.google.com">Contact Us</a></div>
</li>
<li>
<div class="TemplateButton"><a href="http://www.google.com">Enter Project</a></div>
</li>
<li>
<div class="TemplateButton"><a href="http://www.google.com">Request Consultation</a></div>
</li>
<li>
<div class="TemplateButton"><a href="http://www.google.com">How to Protect Yourself From Some Really Long Text</a></div>
</li>
</ul>
</div>
ul {
list-style-type: none;
}
/* BUTTONS INSIDE TAB STYLING */
#ButtonContainer {
margin: auto;
width: 100%;
overflow: auto;
padding-top: 10px;
padding-bottom: 10px;
}
#ButtonContainer > ul {
padding: 0;
margin: 0;
}
#ButtonContainer > ul > li {
display: inline-block;
vertical-align: bottom;
}
.TemplateButton {
overflow: auto;
vertical-align: bottom;
}
.TemplateButton > a {
width: 119px;
height: 119px;
padding: 15px;
float: left;
background-color: pink;
margin-left: 3px;
margin-right: 3px;
vertical-align: bottom;
text-align: center;
font-size: 1.25em;
border: 1px solid white;
border-radius: 15px;
-moz-border-radius: 15px;
}
采纳答案by DaniP
In your atags use table-cellinstead of floatand change vertical-align to middle:
在您的a标签中使用table-cell代替float并将垂直对齐更改为middle：
.TemplateButton > a {
/*float: left; Remove this*/
display:table-cell; /*Add this*/
vertical-align:middle; /*Change to middle*/
}
Check this Demo Fiddle
检查这个演示小提琴
回答by helion3
Set the anchor's line-heightto that of the DIV, or set it to display: blockotherwise your width/height values won't work
将锚点设置为line-heightDIV的锚点，或将其设置为display: block否则您的宽度/高度值将不起作用
