Vertical alignment inside divs contained in a div representing a row

Question

I tried almost all the vertical alignments for the trick div, which I can find and still do not get results. This is inside an established flexible structure, so I split it into several inline CSS to show the problem.

<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 in field 1, and the text in all cells is vertically aligned in the middle.

row.uniform sets some margins, padding, and vertical alignment by default, but it does nothing.

Answer 1

Please note that I deleted 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 who are wondering about browser support, it is supported in all major browsers .

Answer 2

simplest solution, and for more details see css flexbox

If you want to center the alignment of the content, see this demo.

 .row { display: flex; } .row div{ flex: 1 } 

 <div class="row"> <div style="background:#CCC;"> box 1<br /> line 2 </div> <div style="background:#a43c69;"> box 2 </div> <div style="background:#CCC;"> box 3 </div> <div style="background:#a43c69;"> box 4 </div> </div>