Question

我有一个标题，里面有两个元素。第一个是公司徽标的图像，宽度设置为25％。另一个是导航栏，其元素设置为内联，因此它是水平的。我希望导航栏可以垂直放置在中心，但是对于我的生活来说，我无法弄明白。我已将我知道的所有内容设置为可以使用vertical-align的元素，并将所有内容放在显示内联或表格单元格中以应用它。什么都行不通。

请记住，我之所以不给它一个静态百分比填充或边距顶部的原因是因为随着页面变宽，图像高度会随着宽度的增加而扩展，因此当您横向展开浏览器时，导航变为越来越不合适。

我非常感谢任何帮助，因为我已经尝试过（比我想承认的要长得多）只是垂直居中一个物体。

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减少：

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:

这是一个简单的jsFiddle： http://jsfiddle.net/LbTCT/

Answer 1

Here's a fork你原来的小提琴。您需要在徽标和inline-block元素本身上设置nav：

header img, header nav {
    display: inline-block;
    vertical-align: middle;
}

而不是尝试float事。

Answer 2

关于将所有内容作为内联块的答案是正确的。除了从文档流中删除元素之外，浮点数在这种情况下没有为您做任何事情。但是，如果您的目标是旧版浏览器，那么这里的解决方案应该适用于那些不支持表格单元格之外的垂直对齐的解决方案：

Example Fiddle

相关的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;
}

Answer 3

这是一种做到这一点的方法，它涉及标记的一个小变化。

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

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

关键是将徽标图片放在列表的第一个<li>元素中。然后，您将列表的所有元素显示为inline，并使用vertical-align: middle对其进行排列。

您可以调整填充和边距属性以获得所需的精确外观。

小提琴参考：http://jsfiddle.net/audetwebdesign/adW9Y/

注意：
该代码还适用于允许图像大小随视口缩放。

添加以下CSS规则：

.autoSize { width: inherit; } .autoSize img { width: 25%; }

并在标记中添加一个类，如下所示：

<li class="autoSize"> <img src="http://i1207.photobucket.com/albums/bb466/audetwebdesign/jsFiddle%20Demos/chamber-logo.png"> </li>

由于ul元素扩展到视口的宽度，因此可以将宽度继承到包装图像的子li元素。然后，您可以设置图像的相对宽度（在此示例中为25％），您将获得灵活/响应缩放。

垂直居中导航栏

3 个答案: