显示表和显示表单元格不工作答案

【问题标题】：Display Table & Display Table-Cell Not Working显示表和显示表单元格不工作
【发布时间】：2019-12-15 00:41:11
【问题描述】：

我正在尝试自动对齐导航栏，以便徽标和链接始终垂直对齐。我添加了一个“显示：表格；”到我的主标题和 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;
}

【问题讨论】：

你的a标签应该在ol的li标签内。
validate, validate, validate.

标签： html css vertical-alignment css-tables

【解决方案1】：

试试这个

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

在li 标签内移动锚标签。

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

.links{
    float:none;
}

【讨论】：

表格似乎可以正常工作，但是，它们没有垂直对齐（通过中间），现在我的链接之间有奇怪的间距。有些链接彼此靠近，有些则很远。有什么额外的想法吗？这是我第一次使用 CSS 表格，所以我为这些问题道歉。 Sublime 仍然会使表格、表格行和表格单元格变白。
你能检查这是否是你想要的DEMO
差不多。但是徽标和链接将在父框内垂直对齐中心对齐。演示使它们与顶部对齐。
那是因为小提琴中没有空格。尝试扩大结果区域。

【解决方案2】：

我对 James 在这里所做的做了一些更改 (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:left 并使用 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/

【讨论】：

【解决方案3】：

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

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

【讨论】：