html - 使用非默认正文字体在导航内垂直居中 div

Question

我有一个带有简单文本的简单导航，但我的列表项是一个 div。我想将 div 垂直居中。当我开始这个元素时，一切看起来都很棒，直到我改变了正文的字体。我不明白它如何影响 div，因为 div 里面没有文本。我总是处理这样的问题，尽管我阅读了很多关于居中的文章。

我在这里插入了代码，我还创建了一个 jsfiddle 页面:http://jsfiddle.net/0vwhjnnw/1/

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800italic,800,700italic,700,600italic,600,400italic,300italic,300&subset=latin,cyrillic-ext,latin-ext);

body {
	font-family:"Open Sans", sans-serif;
}

ul { 
    list-style:none;
    margin:0;
    padding: 0;
    position:absolute;
    right:0;
    top:0;
    line-height:80px;
}

li { 
    display:inline-block;
    margin:0 10px;
    background:#ccc;
    float:left;
    text-transform:uppercase;
}

a {
    padding:0 20px;
    display:inline-block;
}

.arrow {
    width:30px;
    height:50px;
    background:blue;
    display:inline-block;
    vertical-align:middle;
}

<ul class="menu">
    <li><a href=""><span class="item">Menu 1</span></a></li>
    <li><a href=""><span class="item">Menu 2</span></a></li>
    <li><a href=""><span class="item">Menu 3</span></a></li>
    <li><a href=""><span class="item">Menu 4</span></a></li>
    <li><a href=""><span class="arrow"></span></a></li>
</ul>

你怎么看，我怎样才能使蓝色 div 垂直居中？

Answer 1

这是帮助您将 div 垂直居中对齐的链接

https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/