Question

我正在使用HTML / CSS制作网站，在我的主页上，我有一些<div>标签位于<div>个标签内。我似乎无法将内部<div>标记与外部<div>标记的中心对齐。这是我正在使用的HTML代码（旁边有星号的那个是我要对齐的那个）;

    <div id="container">
<div align="center" id="box" style="background-color:black;width:375px;height:400px;border:0px solid #003300;">
<h1 id="heading"></h1>
<h2 id="otherheading"></h2>
**<div align="center" id="box" style="background-color:white;width:275px;height:225px;border:0px solid #003300;">**
<ul class="list-tick">
    <li></li>
    <hr>
    <li></li>
    <hr>
    <li></li>
    <hr>
    <li></li>
    <hr>
    <li></li>
</ul>
</div>

这是我的CSS：

#container {
  margin: auto;
  width: 1125px;
}

#container div {
  float: left;
  height: 400px;
  width: 375px;
}

任何帮助将不胜感激。如果您对此问题有进一步的疑问，我会尝试更详细地解释。

Answer 1

删除浮动，并添加这些

#container div {
  margin: 0 auto; /* Center Horizontally */
  height: 400px;
  width: 375px;
}

Answer 2

写下这个：

#box
{
margin-left: auto;
margin-right: auto;
}

Answer 3

没有完美的方法来对齐CSS中的内容。但是你可以使用一个小技巧来解决这个问题。

您可以在此处查看我的解决方案：http://jsfiddle.net/kh7UT/

Ofc，你不应该有边界，他们很简单就可以证明这一点。它不是最美丽的标记，但它有效。

Answer 4

尝试

div#box
{
margin-left: auto;
margin-right: auto;
width:275px;
}

将margin-left，margin-right设置为'auto'将自动调整容器的左右，即使其居中。

如何将<div>与<div>的中心对齐？</div> </div>

4 个答案: