2

我有一个<div>样式如下：

.content{
    width: 70%;
}

要使 div 居中，可以将边距设置为 auto ( margin: 0 auto;)，但这仅在我有固定大小（例如 400 像素）时才有效。那么我怎样才能使我的 div 以相对宽度居中呢？

4

3 回答 3

6

margin: 0 auto也适用于百分比 div。侧边距将根据宽度的百分比计算。

http://jsfiddle.net/B32mh/

于 2013-10-02T18:48:14.340 回答
1

margin: 0 auto也可以，或者您可以display: inline-block在内容 div 上使用并用 div 包装它text-align: center

<div id="one">one</div>
<br /><br />
<div id="wrap">
    <div id="two">two</div>
</div>

CSS

#one {
    width: 70%;
    height: 100px;
    background: #ccc;
    margin: 0 auto;
    text-align: center;
}

#wrap { text-align: center; }
#two {
    width: 70%;
    height: 100px;
    background: #ccc;
    display: inline-block;
    text-align: center;

}

http://jsfiddle.net/4KhJL/3/

于 2013-10-02T18:57:20.930 回答
1

使用

<body>
  <div class="content">
    <div class="centered"><h1>Hello</h1></div>
  </div>
</body>

和 CSS

.content {
  width: 70%;
  background-color: #e5e5e5;
}

.centered {
  width: 150px;
  background-color: #ccc;
  margin: 0 auto;
}

你得到这个：

在此处输入图像描述

JsBin 演示：http: //jsbin.com/iDAZeSi/1/

从答案编辑

只需添加margin: 0 auto;，.content看起来像

.content {
  width: 70%;
  background-color: #e5e5e5;
  margin: 0 auto;
}

你会得到：

在此处输入图像描述

JsBin 演示：http: //jsbin.com/iDAZeSi/2/

于 2013-10-02T18:53:17.513 回答