Question

我正在尝试自动对齐导航栏，以便徽标和链接始终垂直对齐。我添加了一个“显示：表格”;到我的主标题和Sublime 2白色的“表”，这意味着它没有锁定。它还在我的徽标和链接声明中加入了“Table-Cell”。不用说，我的代码不起作用。

有谁知道为什么？

以下是代码：

<div class="header">
    <img id="GovDefendersLogo" src="images/GovDefendersLogo.png">
    <ol>
        <a href="mailto:govdefenders@dlt.com"><li class="links">Contact Us</li></a>
        <a href="blog"><li class="links">Blog</li></a>
        <a href="partners/index.html"><li class="links">Partners</li></a>
        <a href= "technology/index.html"><li class="links">Technology</li></a>
        <a href="index.html"><li class="links">Home</li></a>
    </ol>
</div>

CSS

.header {
    height: 77px;
    position: relative;
    clear: both;
    background-color: white;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    box-shadow: 0 0 16px 0 rgba(50,50,50,0.3);
    width: 100%;
    display: table;
}

#GovDefendersLogo {
    float: left;
}

ol {
    list-style: none;
    margin: 0;
    padding: 0;
    color: black;
}

.links {
    float: right;
    margin-left: 30px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 400;
    list-style: none;
}

#GovDefendersLogo,
    .links {
    display: table-cell;
    vertical-align: middle;
}

Answer 1

试试这个

ol {
    list-style: none;
    margin: 0;
    padding: 0;
    color: black;
    display:table-row; /*added line*/
}

将锚标记移到li标记内。

如果需要，请执行此操作：

.links{
    float:none;
}

Answer 2

我对詹姆斯在这里所做的事情做了一些改变（jSFiddle）

要使菜单和徽标垂直对齐，请点击以下内容：

删除clear：都来自.header

.header {
    height: 77px;
    position: relative;
    background-color: white;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    box-shadow: 0 0 16px 0 rgba(50,50,50,0.3);
    width: 100%;
}

从float：none：

中删除了浮动：从你的徽标左侧

#GovDefendersLogo {
    float: none;
}

删除了float：left并添加了line-height：77px;来自标签：

ol {
    list-style: none;
    margin: 0;
    padding: 0;
    color: black;
    display:inline-block;
    line-height: 77px;
}

查看更新的代码

在此处 http://jsfiddle.net/wLhz3/

查看完整更新的代码

Answer 3

保留原始代码并编写较少的代码来满足op的要求，答案是：

ol {
  list-style: none;
  margin: 0;
  padding: 0;
  color: black;
  display: table-cell; // Add this
  vertical-align: middle; // Add this
}

显示表＆amp;显示表格单元格不起作用

3 个答案: