将 div 宽度设置为没有 inline-block 的内容，并使 div 彼此居中对齐答案

【问题标题】：set div width to content without inline-block and keep divs under each other center aligned将 div 宽度设置为没有 inline-block 的内容，并使 div 彼此居中对齐
【发布时间】：2013-05-24 05:39:58
【问题描述】：

我希望一些 div 从其内容中获取宽度。 Display:inline-block 可以做到这一点，但我也希望 div 在彼此下方，而不是像浮动一样彼此相邻。

使用 float:left 而不是 inline-block 可以做到这一点，但我希望 div 居中对齐，而不是左对齐。我该怎么做？

【问题讨论】：

标签： css

【解决方案1】：

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/查看演示

【讨论】：

【解决方案2】：

在父 div 上放置 white-space: pre-line; 在子 div 上添加 clear : both

#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/

【讨论】：

不错的解决方案，但pre-line 会使 HTML 标记保持清晰，例如，如果您在 div1 和 div2 标记之间插入一些空行，则视图将是有害的.看到这个jsFiddle。
没错，但我也没有习惯在代码行之间留那么多空间哈哈。但是是真的。看起来你赢了。
我可以看到这个解决方案适用于边框，而 NOX 的解决方案存在渲染边框的问题。我只需要注意代码行之间的空格！
只是想提一下，另一种解决方案是将单独的跨度标签包裹在每个文本周围，允许跨度具有边框，而 div 具有阻塞和清除。这将是更多的代码，但更“可靠”的方法。

【解决方案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;
}

【讨论】：

IE8 的 content 属性不是有 bug 吗？
也许，我没有测试它，但是正如你所看到的，这个问题被标记为 CSS3 ;)。
我可以看到你的小提琴有效，但是边框和填充有问题请参阅jsfiddle.net/uvSfK
@PeterBrowne 所以你应该改变你的标记，我想。将span 放入您的divs 并设置样式，检查此jsFiddle。

【解决方案4】：

正如in this thread所提到的，这个问题也有弹性解决方案：

#container > p {
  border-bottom: 2px solid black;
}
    
#container {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}

<div id="container">
  <p>A text</p>
  <p>A text</p>
  <p>A longer text</p>
</div>

【讨论】：