Html 垂直居中导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15367561/
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
Centering a nav bar vertically
提问by user2093601
I have a header with two elements in it. The first is an image that is a company logo and is set to 25% width. The other is a nav bar with its elements set inline so it is horizontal. I'd like for the navigation bar to be set vertically center but for the life of me cant figure it out. I've set everything I know to an element that can use vertical-align and put everything in display inline or table cell to apply it. Nothing works.
我有一个包含两个元素的标题。第一个是公司徽标图像，宽度设置为 25%。另一个是导航栏，其元素设置为内联，因此它是水平的。我希望将导航栏设置为垂直居中，但我一生都无法弄清楚。我已经将我知道的所有内容都设置为一个可以使用垂直对齐的元素，并将所有内容放在显示内联或表格单元格中以应用它。什么都行不通。
Keep in mind that the reason I don't just give it a static percentage padding or margin top is because as the page gets wider the image height expands as the width does so as you expand the browser horizontally the nav becomes more and more out of place.
请记住，我不只是给它一个静态百分比填充或边距顶部的原因是因为随着页面变宽，图像高度随着宽度的变化而扩展，因此当您水平扩展浏览器时，导航变得越来越多地方。
I would greatly appreciate any help as I've tried ( much longer than i'd like to admit) on just centering an object vertically.
我将不胜感激，因为我已经尝试过（比我想承认的时间长得多）仅将对象垂直居中。
HTML cut down:
HTML 删减：
<div id="container">
<header id="header" role="banner">
<img src="images" />
<nav id="nav" role="navigation">
<ul>
<li><a href="#" title="About Us">About Us</a></li>
<li><a href="#" title="Biographies">Biographies</a></li>
<li><a href="#" title="Services">Services</a></li>
<li><a href="#" title="Careers">Careers</a></li>
<li><a href="#" title="Contact">Contact</a></li>
</ul>
</nav>
</header>
CSS cut down:
CSS 缩减：
header img {
height: auto;
width: 25%;
float: left;
}
header nav {
width: 75%;
font-size: 1em;
}
header nav li {
display: inline-block;
width: 19%;
}
header nav li a {
background: #2CB2E6;
line-height:
Heres a simple jsFiddle: http://jsfiddle.net/LbTCT/
这是一个简单的 jsFiddle：http: //jsfiddle.net/LbTCT/
回答by CherryFlavourPez
Here's a forkof your original fiddle. You need to be setting inline-blockon your logo and the navelement itself:
这是你原来的小提琴的一个叉子。您需要inline-block在徽标和nav元素本身上进行设置：
header img, header nav {
display: inline-block;
vertical-align: middle;
}
Rather than trying to floatthings.
而不是尝试的float东西。
回答by Josh Burgess
The answer regarding putting everything as an inline-block is correct. The float isn't doing anything for you in that situation other than breaking elements out of document flow. However, if you're targeting older browsers, here's a solution that should work for those that don't support vertical-align outside of table cells:
关于将所有内容都作为内联块的答案是正确的。在这种情况下，除了将元素从文档流中分离出来之外，浮动不会为您做任何事情。但是，如果您针对的是较旧的浏览器，那么这里有一个解决方案应该适用于那些不支持表格单元格外垂直对齐的浏览器：
And the relevant CSS changes are here:
相关的 CSS 更改在这里：
header {
position:relative;
display:block;
}
header:after {
visibility: hidden;
display: block;
font-size: 0;
content:" ";
clear: both;
height: 0;
}
header nav {
width: 70%;
font-size: 1em;
position: absolute;
top: 50%;
line-height: 200%;
margin-top: -2em;
}
回答by Marc Audet
Here is one way of doing it which involves a small change in your mark-up.
这是一种方法，它涉及对您的标记进行小的更改。
<div id="header">
<header role="banner">
<nav id="navigation" role="navigation">
<ul>
<li>
<img src="http://i1207.photobucket.com/albums/bb466/audetwebdesign/jsFiddle%20Demos/chamber-logo.png">
</li>
<li><a href="#" title="About Us">About Us</a>
</li>
<li><a href="#" title="Biographies">Biographies</a>
</li>
<li><a href="#" title="Services">Services</a>
</li>
<li><a href="#" title="Careers">Careers</a>
</li>
<li><a href="#" title="Contact">Contact</a>
</li>
</ul>
</nav>
</header>
</div>
and the CSS looks like:
和 CSS 看起来像：
#header {
background-color: #cccccc;
padding: 5px 0;
}
header {
background-color: #f0f0f0;
}
header nav {
border: 1px solid red;
}
header nav ul {
margin: 0;
padding: 0;
}
header nav li {
display: inline;
margin: 0;
padding: 0;
}
header nav li img {
vertical-align: middle;
border: 1px solid blue;
}
header nav li a {
vertical-align: middle;
font-size: 1.00em;
text-decoration: none;
background-color: white;
color: black;
padding: 10px;
margin: 0 0 0 10px;
}
The key is to place the logo image in the first <li>element of your list. You then display all the elements of the list as inlineand use vertical-align: middleto line them up.
关键是将徽标图像放在<li>列表的第一个元素中。然后将列表中的所有元素显示为inline并用于vertical-align: middle排列它们。
You can adjust the padding and margin properties to get the exact look that you need.
您可以调整填充和边距属性以获得所需的确切外观。
Fiddle for reference: http://jsfiddle.net/audetwebdesign/adW9Y/
小提琴参考：http: //jsfiddle.net/audetwebdesign/adW9Y/
NOTE:
The code also lends itself to allowing the image size to scale with the viewport.
注意：
该代码还有助于允许图像大小随视口缩放。
By adding the following CSS rule:
通过添加以下 CSS 规则：
.autoSize {
width: inherit;
}
.autoSize img {
width: 25%;
}
and adding a class to the mark-up as follows:
并将类添加到标记中，如下所示：
<li class="autoSize">
<img src="http://i1207.photobucket.com/albums/bb466/audetwebdesign/jsFiddle%20Demos/chamber-logo.png">
</li>
Since the ulelement expands to the width of the view port, you can inherit the width to the child lielement that wraps the image. You then set a relative width for the image (25% in this example) and you get the flexible/responsive scaling.
由于ul元素扩展到视口的宽度，您可以将宽度继承给li包裹图像的子元素。然后为图像设置一个相对宽度（在本例中为 25%），并获得灵活/响应式缩放。
