Html 在水平导航菜单中将图像居中我试图在导航菜单的中间对准一个图像，同时试图将整个菜单垂直地放在页面中间。p>_Html_Css

Html 在水平导航菜单中将图像居中我试图在导航菜单的中间对准一个图像，同时试图将整个菜单垂直地放在页面中间。p>

html css

Html 在水平导航菜单中将图像居中我试图在导航菜单的中间对准一个图像，同时试图将整个菜单垂直地放在页面中间。p>,html,css,Html,Css,而且，每次我在图像中放置文本时，文本都会移到底部，而不是与图像的垂直中心对齐以下是html： <body> <div id="centered"> <ul> <li><a href="link1.html">LINK1</a></li> <li><a href="link2.html">LINK2</a></li> <li

而且，每次我在图像中放置文本时，文本都会移到底部，而不是与图像的垂直中心对齐

以下是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;
}

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