Question

我正在尝试在导航栏中垂直对齐徽标和UL。我已经非常接近，它看起来确实很好，但是在它们下方和上方都有一些额外的空间我无法解释。我在链接和徽标上设置了填充，以便用户能够更轻松地单击它们。

将鼠标置于徽标下方并在导航栏下方，我试图这样做，以便只要您的鼠标到达导航栏，它就会碰到徽标的填充，因此鼠标光标变为指针。但是，那里存在差距......使用开发人员工具，我可以看到它是div.inner元素......但它表示它有一个余量。我已经尝试在该div上将边距设置为0并且它不会消失。

以下是jsfiddle示例：http://jsfiddle.net/Forresty/0smpmsqn/2/

我使用与此处相同的垂直对齐方法：http://webdesign.tutsplus.com/tutorials/the-holy-grail-of-css-centering--cms-22114

这是HTML：

<nav>
    <div class="outer">
        <div class="inner">
            <div class="logo1">LOGO</div>
            <ul>
                <li><a href="#" class="border">About</a></li>                    
                <li><a href="#" class="border">My Work</a></li>                    
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

非常感谢任何帮助。或者即使不可能摆脱那个额外的空间，也可以解释为什么它会很棒。

提前致谢。

Answer 1

删除

Display: table-cell;

要在中间使用

线高|保证金|填充

显示表格单元格添加空格

Answer 2

您可以更改以下内容：

 .outer {
    display: table;
    width: 100%;
    height: 100%;
    padding: 0;/*set padding to 0*/
}

.logo1 {
    display: inline-block;
    font-family: dan_custom-font;
    font-size: 2em;
    float: left;
    margin: 0.3em;/*replace padding with margin*/
    margin-left: 0.7em;/*set a bit more margin left*/
    cursor: pointer;
    color: #de1b1b;
    text-align: center;
    -webkit-transition: color .3s;
    transition: color .3s;
}

fiddle

您可以设置.outer班级padding: 0，并将margin替换为padding中的.logo1。

Answer 3

你有很多选择。

调整导航的高度，使其适合徽标和ul。
调整徽标和ul的填充，使其适合导航。

要查看它们是否合适，请先为徽标和ul设置背景颜色并检查。

垂直对齐并不是很正确

3 个答案: