CSS: Shrink-to-fit a DIV to equal the width of its content

 

 

 

Shrinking a DIV-Container to fit the width of its content can be very useful sometimes, especially if you tried margin: 0 auto to center and found out it doesn’t work. Why not? Because DIVs are block elements and take all the space they can get. To still equal the width of the DIV to the width of its content, we need to make it display:inline-block or display:table. The former has the disadvantage that we need to set its parent to text-align: center, while the latter can be centeed directly using margin: 0 auto. Both seem to work from IE8 upwards, yet some browser incompatibilities were reported years back in Chrome that should be fixed meanwhile. Anyhow there is a third trick of using white-space: nowrap instead. Try out for yourself what works best in your situation, and you can also take a look at new CSS3 options that came up meanwhile.

 

즉, 

 

display: inline-block;

 

 

을 주면 된다:) 

 

 

출처: https://sundari-webdesign.com/css-shrink-to-fit-a-div-to-equal-the-width-of-its-content/