Question

我有一个简单的文本导航，但我的列表项是一个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/

Answer 2

如果我理解你的问题是正确的，你可以将它添加到你的CSS

    li {
    position: relative;
}

.position-absolute-xy-axis {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

并在html中添加position-absolute-xy-axis类

<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 position-absolute-xy-axis"></span></a></li>

https://jsfiddle.net/twk0z2qh/

就个人而言，我会玩flexbox https://jsfiddle.net/qLumzy65/1/

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

2 个答案: