css - インラインブロックなしでdivの幅をコンテンツに設定し、互いの下のdivを中央揃えにします

Question

一部の div で、コンテンツから幅を取得したいと考えています。Display:inline-block がこれを行いますが、div をフロートとして隣り合わせにするのではなく、互いの下に配置することも必要です。

inline-block の代わりに float:left を使用するとこれが行われますが、div を左揃えではなく中央揃えにする必要があります。これどうやってするの？

Answer 1

このスレッドで述べたように、この問題に対するフレックス ソリューションもあります。

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


    

Answer 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/でデモを確認してください