0

我正在尝试 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;}

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

4

4 回答 4

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;
}
于 2013-11-13T06:11:05.027 回答
0 
    .myclass{
    margin:0px auto;
text-align:center
    }
于 2013-11-13T06:05:51.207 回答
0

你也可以这样做，

<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; 使其在所有其他浏览器中都能正常工作。

于 2013-11-13T05:59:17.193 回答
0

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

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

会成功的:)

于 2013-11-13T05:50:20.850 回答