CSS – align multiple divs horizontally

To align div horizontally, one solution is to use css float property. But a better solution is to to use CSS display:inline-block on all divs which needs to be aligned horizontally and place them in some container div.

Here is are some examples.

inline-block divs with default vertical-align

Default vertical-align value is baseline. Note that here baseline of all divs are aligned to baseline of parent div.

<style type="text/css" media="screen">
.outer {background-color:lightgray;}
.outer > * {
  display:inline-block;
  background-color:lightgreen;
}
.one {width:80px; height:80px;}
.two {width:80px; height:80px;}
.three {width:80px; height:100px;}
</style>

<div class="outer">
<div class="one">Some text that will wrap</div>
<div class="two">hello</div>
<div class="three">world</div>
</div>
refresh

inline-block divs with vertical-align:middle

Here we are using vertical-align:middle. This way all inline-block divs are aligned at middle.

<style type="text/css" media="screen">
.outer {background-color:lightgray;}
.outer > * {
  display:inline-block;
  vertical-align:middle;
  background-color:lightgreen;
}
.one {width:80px; height:80px;}
.two {width:80px; height:80px;}
.three {width:80px; height:100px;}
</style>

<div class="outer">
<div class="one">Some text that will wrap</div>
<div class="two">hello</div>
<div class="three">world</div>
</div>
refresh

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments