我知道这个问题被问了很多，但我的网站在 div 元素的居中方面遇到了严重的问题。 我在博客或其他网站上阅读了数百个答案，但无法找出问题所在。
我的网站顶部有一个固定位置的导航栏。这个导航栏在自己的 div 中。 然后我想要一个居中的文本和一张图片。 所以我在第一个 div 的正下方写了另一个 div，并非常努力地将它居中。 我还尝试从居中的第一个 div 复制 CSS 设置，但它不起作用。
但是，这里是完整的源代码和 CSS 样式表:
body {
padding:0;
margin:0;
background-color:#555555;
float:left;
}
#nav {
background-color:black;
color:white;
text-align:center;
padding:0px;
position:fixed;
left:0;
right:0;
width:100%;
}
#menue_button {
border:0;
height:"40px";
width:"40px";
cursor:se-resize;
}
a {
color:white;
}
input {
margin: 0;
padding: 2px 0 3px 30px;
background-color: #ffffff;
font-size: 16px;
vertical-align: center;
border: none;
border-bottom: 3px solid #bdbdbd;
border-image: initial;
cursor: auto;
border-radius: 8px;
box-shadow: inset 0 1px 2px rgba(0,0,0,.45);
}
#sewing_menue_bar {
margin:0;
padding:0;
position:fixed;
left:0;
right:0;
top:55px;
width:100%;
}
#logo{
background-color:white;
color:black;
text-align:center;
padding:0px;
left:0;
right:0;
width:100%;
margin-top:70px;
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>AeroTop</title>
<link rel="stylesheet" type="text/css" href="style/Style.css">
</head>
<body width="100%">
<div id="nav">
<table width="100%" cellpadding="0px">
<tr>
<td width="8%">
<img src="graphics/menue_button.png" border="0" alt="Settings" height="40px" width="40px" title="Settings" style="cursor:pointer">
</td>
<td width="38%">
<p id="nav-set"><a href="login_overlay.html">Login</a>       Not a member yet? <a href="register.html">Register!</a></p>
</td>
<td width="1%">
<p id="nav-set_|">|</p>
</td>
<td width="30%">
<p id="nav-set">
<input name="q" type="text" placeholder="Auf AeroTop suchen ">
</p>
</td>
</tr>
</table>
</div>
<div id="sewing_menue_bar">
<img src="graphics/sewing_menue_bar_smaller.png">
</div>
<div id=logo>
<table>
<tr>
<td width="100%">
<p>test</p>
</td>
</tr>
</table>
</div>
</body>
</html>感谢您的帮助!
最诚挚的问候法比安
最佳答案
试试这个:
body{width: 100%;}
#sewing_menue_bar {
margin: 0;
padding: 0;
position: fixed;
left: 50%;
right: 0;
top: 55px;
width: 100%;
}
#logo table {
width: 100%;
}
这是错误的:
<body width="100%">
您必须在 body 标签中输入正确的 style="width:100%"
<body style="width:100%">
关于html - 在 CSS/HTML 中居中 DIV，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27881181/