如何div从中心开始，例如向左或向右浮动？

Question

我想让div从中心开始，例如向右或向左浮动，但我没有这样做。 请帮我？

HTML

<div class="conta">
    <div class="box">
        <p>some text</p>
    </div>
    <div class="box">
        <p>some text</p>
    </div>
    <div class="box">
        <p>some text</p>
    </div>
    <div class="box">
        <p>some text</p>
    </div>
</div>

CSS

.conta{width:100%; position:relative; text-align:center}
.conta .box{float:left; width:100px; height:100px; border:1px solid #000; margin:5px;}

我想在中心和内联开始框。

Answer 1

有很多可能的方法。

---

一

最简单的方法是： margin:0 auto但是您需要固定宽度。

演示

---

二

您可以设置display:inline-block; 设置为内部元素，并将text-align:center设置为容器。

演示

HTML

<div>
    <div></div>
</div>

CSS

div{
    text-align:center;
}

div div{
    display:inline-block;
    background:gray;
    width:200px;
    height:100px;
}

---

三

设置position:relative对于容器， position:absolute到内部元素，然后设置left:50%和margin-left:-100px （ margin-left必须为宽度的一半，在这种情况下为100px ）。

演示

CSS

div{
    position:relative;
}

div div{
    position:absolute;
    left:50%;
    margin-left:-100px;

    background:gray;
    width:200px;
    height:100px;
}

Answer 2

对于块级项目，可以使用自动页边距执行此操作（当项目在文档流中时。当您浮动它时，将其放置在非静态位置时，会将其从文档流中取出。）

div.my-container { margin: 0 auto; }

会做的把戏:)

Answer 3

你也可以这样

<div id="main" style="text-align:center">
 <div id="inner" style="text-align:left;">
  I want to be center left.......
 </div>
</div>

现在main（outer div）对齐居中，内容div（inner）居中对齐。 这在IE中效果很好。 您应该添加margin：0 auto; 使其在所有其他浏览器中都能正常工作。

Answer 4

    .myclass{
    margin:0px auto;
text-align:center
    }