-2

我正在使用 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;
}

任何帮助将不胜感激。如果您对该问题还有其他疑问，我将尝试更详细地解释。

4

4 回答 4

3

删除浮动，并添加这些

#container div {
  margin: 0 auto; /* Center Horizontally */
  height: 400px;
  width: 375px;
}
于 2012-09-18T13:10:05.487 回答
0

在 css 中没有完美的方法来居中对齐内容。但是，您可以使用一个小技巧来解决此问题。

你可以在这里看到我的解决方案：http: //jsfiddle.net/kh7UT/

Ofc，你不应该有边界，它们在那里很容易展示技巧。这不是最漂亮的标记，但它有效。

于 2012-09-18T13:19:02.580 回答
0

写这个：

#box
{
margin-left: auto;
margin-right: auto;
}
于 2012-09-18T13:07:02.750 回答
0

尝试

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

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

于 2012-09-18T13:28:52.873 回答