Azincourt Azincourt - 6 months ago 32
CSS Question

CSS: Horizontally align div without float

I want to know if there exists an elegant way to horizontally align 3

divs
without using
float
css property.

HTML:

<div id="parent">
<div id="first">Left</div>
<div id="second">Middle</div>
<div id="third">Right</div>
</div>


I ask this question because the parent
div
has not
float
property and adding
float
to children cause problems on page resizing.

Answer

You can use display:inline-block or display:table-cell with the inner content.

#parent{ display:flex; justify-content: space-between; }

JSFiddle

  • Table layout:
#parent{ display:table; width:100%; }
#parent div{ display:table-cell; }
#first{ text-align:left; }
#second{ text-align:center; }
#third{ text-align:right; }

JSFiddle

  • Inline-block layout :
#parent{ width:100%; white-space:nowrap; }
#parent div{ display:inline-block; width:33.3%;}
#first{ text-align:left; }
#second{ text-align:center; }
#third{ text-align:right; }

JSFiddle