将div宽度设置为内容，而不使用inline-block并保持div在其他中心对齐 [英] set div width to content without inline-block and keep divs under each other center aligned

问题描述

我想要一些div从他们的内容中获得他们的宽度。显示：inline-block这样做，但我也想要div在彼此之下，不是彼此相邻的浮动。

I want some divs to get their width from their content. Display:inline-block does this, but I also want the divs to be under each other, not next to each other as floated.

使用float：left而不是inline-block做到这一点，但我想要div是中心对齐，不左对齐。如何做到这一点？

Using float:left instead of inline-block does this, but I want the divs to be center aligned, not left aligned. How can I do this?

推荐答案

在父div上put white-space：pre-line;
对子div添加清除：两者

on the parent div put white-space: pre-line; on the child divs add 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/

这篇关于将div宽度设置为内容，而不使用inline-block并保持div在其他中心对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！