Question

我正在尝试将图像置于导航菜单中间，同时还尝试将整个菜单垂直居中放置在页面中间。

此外，每次放入图像时，文字都会移到底部，而不是与图像的垂直中心对齐。

这是html：

<body>
      <div id="centered">
<ul>
    <li><a href="link1.html">LINK1</a></li>
    <li><a href="link2.html">LINK2</a></li>
    <li><img src="http://prettylushrecords.comoj.com/sampleimage.jpg"></li>
    <li><a href="link3.html">LINK3</a></li>
    <li><a href="link4.html">LINK4</a></li>
</ul>     
</div>
   </body>

这是CSS：

html, body  { 
    background-color: white; 
    height: 100%; 
    margin: 0; 
    padding: 0;
    color: white; 
}

#centered { 
    border: none; 
    background: white; 
    height: 150px; 
    width: 100%;
    text-align: center;
    position: absolute; 
    top: 50%;
    margin-top: -75px;
}

#centered ul {
    list-style: none;
    margin-top: 58px;
    padding: 0;
} 

#centered li {
    display: inline-block;
    margin: 0 20px 0 20px;
    font-family: Courier, monospace;
    font-size: 15px;
    font-weight: bold;
}

#centered li a { 
    text-decoration: none; 
    color: #000;
    /*transition: color 0.2s linear;*/
}
#centered li a:hover {
    color: #bdb0b0;
    text-decoration: underline;
}

以下是演示：http://jsfiddle.net/chassen2/n84ey/11/

Answer 1

您可以使用vertical-align：middle（与display：table-cell一起）在css中居中。

<div style="display: table;">
    <div style="display: table-cell; vertical-align: middle;">
    </div>
</div>

DEMO：http://jsfiddle.net/RS78Y/

也许它会帮助你。

在水平导航菜单中居中图像

1 个答案: