Html 显示表&；显示表格单元格不工作

我正在尝试自动对齐导航栏，以便徽标和链接始终垂直对齐。我在主标题中添加了一个“Display:Table；”，并将2个空格升华为“Table”，这意味着它没有锁定。它还将我的徽标和链接声明中的“表格单元格”清除。不用说，我的代码不起作用

有人知道为什么吗

代码如下：

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

试试这个

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

在

li

标记内移动锚定标记

如果需要，请执行以下操作：

.links{
    float:none;
}

---

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

要使菜单和徽标垂直对齐，我更改了以下内容：

删除清除：从.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%;
}

已从徽标中删除浮标：左侧，浮标：无：

#GovDefendersLogo {
    float: none;
}

移除浮子：左侧，添加线高：77px；从标签：

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

见更新代码

---

在这里查看完整的更新代码

保留原始代码并编写更少的代码以实现op的要求，答案是：

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

---

你的

a

标签应该在你的

ol

的

li

标签内。这个表似乎在工作，但是它们没有垂直对齐（通过中间），现在我的链接之间有奇怪的间隔。有些链接彼此接近，有些则相距遥远。还有其他想法吗？这是我第一次使用CSS表格，所以我为这些问题道歉。升华仍然会清空表格、表格行和表格单元格。您能检查一下这是否是您几乎想要的吗。但徽标和链接将在父框内垂直对齐。演示让他们对准顶部，这是因为小提琴中没有空间。尝试扩大结果区域。

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