一

Question

我正试图在中心开始像左右浮动，但我没有这样做。请帮帮我？

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但你需要有固定的宽度。

DEMO

两个

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

DEMO

<强> 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）。

DEMO

<强> CSS

div{
    position:relative;
}

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

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

Answer 2

对于块级项目，您可以使用自动边距来执行此操作（当项目位于文档流程中时。当您将其浮动时，将其置于静态以外的位置，您将其从文档流程中取出。）< / p>

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（外部div）与中心对齐，内容div（内部）在中心左对齐。这在IE中运行良好。你应该添加保证金：0 auto;使其在所有其他浏览器中都能正常工作。

Answer 4

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

如何在中心开始像左边或右边的浮动？

4 个答案:

一

两个

三