将div宽度设置为不带内联块的内容,并将div保持在彼此中心对齐的位置

时间:2013-05-29 04:57:21

标签: css css3

我想要一些div来从他们的内容中获取他们的宽度。显示:内联块执行此操作,但我也希望div在彼此之下,而不是彼此相邻,因为浮动。

使用float:left而不是inline-block可以做到这一点,但是我希望div是中心对齐的,而不是左对齐。我怎么能这样做?

4 个答案:

答案 0 :(得分:7)

在父div上放白空:pre-line; 在孩子divs上添加明确:两者

#wrapper{ text-align: center; white-space: pre-line; }
#div1, #div2{

    display: inline-block;    
    clear: both;
    border: 1px solid grey;
    margin: 3px auto 3px auto;
    width: auto;

}

<div id="wrapper">
     <div id="div1" class="clearfix">some content here that is bigger</div>
     <div id="div2" class="clearfix">some content here</div>
</div>

http://jsfiddle.net/judsonmusic/8HCWp/

答案 1 :(得分:3)

Working jsFiddle Demo

考虑以下标记:

<div class="container">
    <div class="text">apple</div>
    <div class="text">banana</div>
    <div class="text">kiwi</div>
    <div class="text">orange</div>
</div>

因为您想要align您的元素,您必须使用inline,然后我们才会中断 他们与:after

.container {
    text-align: center;
}

.text {
    background: yellow;
    display: inline;
}

.text:after {
    content: '';
    display: block;
}

答案 2 :(得分:0)

正如前面提到的in this thread,这也解决了这个问题:

&#13;
&#13;
<div id="container">
  <p>A text</p>
  <p>A text</p>
  <p>A longer text</p>
</div>


    
&#13;
trickle -u 2500 -d 2500 a.out
&#13;
&#13;
&#13;

答案 3 :(得分:-2)

html是

<div>
   abc <div style="margin:4px auto;width:100px;">div1</div><br/>
   abc <div style="margin:4px auto;width:100px;">div1</div><br/>
   abc <div style="margin:4px auto;width:100px;">div1</div><br/>
   abc <div style="margin:4px auto;width:100px;">div1</div><br/>
</div>

和样式表是

div{
    border:1px solid;
    padding:10px;
    display:inline-block;
   }

http://jsfiddle.net/xupHN/

检查演示