div margin auto 中的中心 div 不起作用[重复]
Posted
技术标签:
【中文标题】div margin auto 中的中心 div 不起作用[重复]【英文标题】：Center div in div margin auto doesn't work [duplicate] 【发布时间】：2018-03-30 05:11:22 【问题描述】：您好，我有以下代码： CSS
.center
width: 100%;
margin: 0 auto;
border: 1px solid red;
.nav
background: #606060;
width: 90%;
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/stylesheet.css" />
<title></title>
</head>
<body>
<div class="center">
<div class="nav">
<p>Ahoj</p>
</div>
</div>
</body>
</html>
我也尝试了.center 没有width: 我在这里搜索了主题但我没有找到解决方案。 .nav div 仍然停留在左侧。
感谢您的帮助。
【问题讨论】：
您是否尝试将margin: 0 auto; 添加到.nav 然后设置text-align: center ？
@Krusader 谢谢！这行得通！
我在下面添加了一个答案，如果对您有帮助，请考虑将其作为答案。
【参考方案1】：
.nav
background: #606060;
width: 90%;
display: block;
margin: 0 auto;
【讨论】：
解释在哪里，只是转储代码不是一个好答案 完全没问题？您能描述一下解决方案吗？解释为什么这个 CSS 代码应该工作。我只能看到 CSS 代码（没有 sn-p，格式不正确）。我（我不是反对者） 抱歉，我认为这样的问题不需要完整的教程。从什么时候 *** 成为一个教程杂志？ 阅读帮助：***.com/help/how-to-answer 感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。一个正确的解释would greatly improve 其长期价值，通过展示为什么这是解决问题的好方法，并将使其对有其他类似问题的未来读者更有用。请edit您的回答添加一些解释，包括您所做的假设。【参考方案2】：将margin:0 auto 给.nav 类而不是.center 类。
.center
width: 100%;
border: 1px solid red;
.nav
background: #606060;
width: 90%;
margin:0 auto;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/stylesheet.css" />
<title></title>
</head>
<body>
<div class="center">
<div class="nav">
<p>Ahoj</p>
</div>
</div>
</body>
</html>【讨论】：
【参考方案3】：你不需要定义 margin: 0 auto;当宽度为 100% 时。如果要将固定宽度的分区定位到父div的中心，则需要它。
.center
width: 100%;
border: 1px solid red;
.nav
background: #606060;
width: 90%;
margin: 0 auto;
<div class="center">
<div class="nav">
<p>Ahoj</p>
</div>
</div>【讨论】：
【参考方案4】：将此 CSS 添加到您的 .nav 类中
.nav
.
.
margin: 0 auto;
text-align: center
【讨论】：
【参考方案5】：块级元素不能居中，因为它总是适合其容器的100% 宽度，所以我建议改用inline-block。
.center
width: 100%;
margin: 0 auto;
border: 1px solid red;
text-align:center;
.nav
background: #606060;
width: 90%;
display:inline-block;
<div class="center">
<div class="nav">
<p>Ahoj</p>
</div>
</div>
【讨论】：
以上是关于div margin auto 中的中心 div 不起作用[重复]的主要内容，如果未能解决你的问题，请参考以下文章