10

我有一个包含两个元素的标题。第一个是公司徽标图像，宽度设置为 25%。另一个是导航栏，其元素设置为内联，因此它是水平的。我希望将导航栏设置为垂直居中，但我一生都无法弄清楚。我已经将我所知道的所有内容都设置为可以使用垂直对齐的元素，并将所有内容放入显示内联或表格单元格中以应用它。没有任何效果。

请记住，我不只是给它一个静态百分比填充或边距顶部的原因是因为随着页面变宽，图像高度随着宽度而扩大，所以当您水平扩展浏览器时，导航变得越来越多地方。

我将不胜感激任何帮助，因为我已经尝试过（比我想承认的要长得多）只是垂直居中一个对象。

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/

4

3 回答 3

11

这是你原来的小提琴的一个叉子。您需要设置inline-block您的徽标和nav元素本身：

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

而不是试图float做事。

于 2013-03-12T17:17:59.210 回答
0

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

示例小提琴

相关的 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;
}
于 2013-03-12T17:26:26.593 回答
0

这是一种方法，它涉及到您的标记的微小变化。

<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%），并获得灵活/响应式缩放。

于 2013-03-12T17:57:25.893 回答