html - 左または右にフロートするように、中央で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

多くの可能な方法があります。

---

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%and 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

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