我一直面临将某些内容与页面中心对齐的问题...关键是，我能够实现它...但是当浏览器调整大小时，左侧的内容不可见。 .我不确定我哪里错了..代码如下...
HTML 代码....
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Home</title>
<link href="home.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<img class="logo" src="logo.jpg" width="160px" height="83px">
<div id="menualign">
<ul>
<li class="topli"><a href="">Home</a></li>
<li class="topli"><a href="" target="_blank">site 1</a></li>
<li class="topli"><a href="" target="_blank">Site 2</a></li>
<li class="topli"><a href="">Logout</a></li>
</ul>
</div>
<img src="bgn.jpg" width="900" height="7" id="bar">
</div>
</body>
</html>
CSS代码如下
#container
{
width:920px;
height:600px;
position:absolute;
left: 50%;
top: 50%;
margin-left: -460px;
margin-top: -300px;
}
#menualign
{
position:relative;
left:24%;
}
#menualign ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#menualign ul li { display: inline; }
#menualign ul li a
{
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
padding: .2em 1.41em;
color: #0056A2;
background-color: #fed352;
}
img.logo
{
position:relative;
top:20px;
}
#menualign ul li a:hover
{
color:black;
font-size:17px;
}
最佳答案
您需要使用 margin:0 auto; 定位容器，然后将 float:left 赋给图像，将 float:right 赋给图像菜单。最后给出图像高度的菜单 line-height 以垂直对齐。
#container
{
width:920px;
margin:0 auto;
}
#menualign ul li {
margin-top:10px;
line-height:83px;
float:left;
}
img.logo
{
float:left;
margin-top:10px;
}
好的，我做了一点 jsFiddle，希望它能有所帮助。 jsFiddle
关于css - 将带有图像和链接的 div 作为内容居中对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14976121/