顯示表和顯示表單元格不工作

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 ）

為了使菜單和徽標垂直對齊，我進行了以下更改：

從 .header 中刪除 clear:both

.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 從您的徽標中刪除了 float:left：

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