Steve Steve - 1 month ago 11
CSS Question

vertical align inside divs contained in a div that represents a row

I've tried just about every vertical-align for div trick I can find and still not getting the results. This is inside of an established responsive framework, so I've stripped it down to some inline CSS to show the issue.

enter image description here

<div class="row uniform">
<div style="clear:none;width:25%;float:left;background:#CCC;box-sizing:border-box;">
box 1<br />
line 2
</div>
<div style="clear:none;width:25%;float:left;background:#a43c69;color:#FFF;box-sizing:border-box;">
box 2
</div>
<div style="clear:none;width:25%;float:left;background:#CCC;box-sizing:border-box;">
box 3
</div>
<div style="clear:none;width:25%;float:left;background:#a43c69;color:#FFF;box-sizing:border-box;">
box 4
</div>
</div>


Ideally boxes 2,3 and 4 go to the same height as box 1, and text in all boxes is vertically aligned in the middle.

row.uniform sets some margins, padding and a default vertical-align of baseline, but that's not effecting anything here.

Answer

Note that I removed your float: left; on all div.

.row {
  display: table;
  width: 100%;
}
.row div {
  display: table-cell;
  float: none;
  vertical-align: top;
}
<div class="row uniform">
  <div style="clear:none;width:25%;background:#CCC;box-sizing:border-box;">
    box 1<br />
    line 2
  </div>
  <div style="clear:none;width:25%;background:#a43c69;color:#FFF;box-sizing:border-box;">
    box 2
  </div>
  <div style="clear:none;width:25%;background:#CCC;box-sizing:border-box;">
    box 3
  </div>
  <div style="clear:none;width:25%;background:#a43c69;color:#FFF;box-sizing:border-box;">
    box 4
  </div>
</div>

For those wondering about browser support, it is supported on all major browsers.

Comments