CSS 垂直对齐的锚文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7812511/
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
Vertically aligned anchor text?
提问by Brodie
you probably see this question a lot. However, I've been through threads and I can't seem to find a solution to my situation. It's probably something very minute that I'm missing, or perhaps I'm just barking up the wrong tree all together.
你可能经常看到这个问题。但是，我已经通过线程，我似乎无法找到解决我的情况。这可能是我遗漏的非常微小的事情，或者我可能只是一起在错误的树上吠叫。
Basically what I'm trying to do is take an anchor with a {display:block;} with a set height and width and have its text be vertically and horizontally centered.
基本上我想要做的是使用一个带有 {display:block;} 的锚点，设置高度和宽度，并使其文本垂直和水平居中。
Right now this is my css
现在这是我的 css
.logo
{
width:140px;
height:75px;
border-right:1px dotted black;
border-bottom:1px dotted black;
float:left;
text-align:center;
font-size:15px;
font-weight:bold;
color:#c60606;
}
.logo a
{
display:block;
width:140px;
height:75px;
background-color:#fff;
font-size:15px;
font-weight:bold;
color:#c60606;
}
/*the reason for the double declaration of text information is because
some of the logo divs do not have anchors in them, and it's for uniformity
purposes.
*/
.logo a div
{
margin-top:10px;
}
and then the html would be
然后html将是
<div class="logo"><a href="#"><div>my link</div></a></div>
Now the reason i stuck a div inside of the anchor is because I thought it would be a good way to separate the text from the actual block, but with that margin setting it moves the anchor down instead of just the text. The vertical-align attribute does basically nothing, and I'm at a loss in terms of what to do. Any suggestions or restructuring ideas would be great. Thank you.
现在我将 div 卡在锚点内部的原因是因为我认为这是将文本与实际块分开的好方法，但是通过设置边距，它会将锚点向下移动，而不仅仅是文本。Vertical-align 属性基本上什么都不做，我不知道该怎么做。任何建议或重组想法都会很棒。谢谢你。
a sample can be found at http://www.dsi-usa.com/test/clientele.phpfeel free to browse the site it's still a work in progress a lot has to be organized and re-coded. Anyhow, that sample is exactly what I want, just need the text to be vertically aligned as well.
可以在http://www.dsi-usa.com/test/clientele.php找到示例。请随意浏览该站点，它仍在进行中，需要组织和重新编码很多。无论如何，该示例正是我想要的，只需要将文本垂直对齐即可。
回答by Faust
If you set your line-height of the containing box (your anchor -- just ditch the inner div, you don't need it) equal to its height, then a single lineof text will be vertically centered. If you require line-wrapping, it gets more complicated.
如果您将包含框的行高（您的锚点 - 只需丢弃内部 div，您不需要它）等于其高度，那么一行文本将垂直居中。如果您需要换行，它会变得更加复杂。
Here's a fiddle with just one anchor element to demonstrate the simpler scenario: http://jsfiddle.net/vdkAb/1/
这是一个只有一个锚元素的小提琴来演示更简单的场景：http: //jsfiddle.net/vdkAb/1/
UPDATE
...and if you don't need to worry about IE6/7 support (lucky you!), then you can use display:table-cell, and it works effortlessly -- without specifying line-height -- even with multiple lines, like this: http://jsfiddle.net/PH5Yw/
更新
……如果你不需要担心 IE6/7 支持（你很幸运！），那么你可以使用 display:table-cell，它可以毫不费力地工作——无需指定行高——即使有多个行，像这样：http: //jsfiddle.net/PH5Yw/
回答by Kyle
You can't have a <div>inside an <a>, it's invalid HTML. Use a <span>set to display: block;instead.
你不能有一个<div>inside <a>，它是无效的 HTML。使用一个<span>集合来display: block;代替。
Update:
更新：
As of HTML5, you can now have a div inside an anchor (or any block level element.)
从 HTML5 开始，您现在可以在锚点（或任何块级元素）中有一个 div。
For this to be legal though, you must use the HTML5 doctype:
但是，为了使其合法，您必须使用 HTML5 文档类型：
<!DOCTYPE html>
回答by Brodie
This usually works for me
这通常对我有用
$(function(){
$("button").click(function(){
$(".navbar").toggleClass("large");
});
});*{
box-sizing: border-box;
}
.navbar{
display: flex;
color: white;
background: black;
height: 30px;
margin-bottom: 10px;
transition: all 0.25s ease;
}
.navbar.large{
height: 120px;
}
a{
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 20px;
padding: 0 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<a>TITLE</a>
<a>Contact</a>
<a>About Us</a>
</div>
<button>Change Nav Size</button>Just thought I should put this out there :)
只是想我应该把它放在那里:)
Works only when the link container is display: flex
仅在链接容器显示时有效：flex
