如何将div内部的div水平居中，而内部的div具有其文本内容的宽度？

Question

Outer div have certain width. But inner div should have the width equal to its text content and inner div should be horizontally centered

<div id="outer">
<div id="inner">
Hello....
</div>
</div>

Answer 1

set inner div as display:inline-block and parent text-align:center

 #outer { width: 200px; border: 1px solid red; text-align: center } #inner { display: inline-block; border: 1px solid green; } 

 <div id="outer"> <div id="inner"> Hello.... </div> </div>