css - Html element is not vertically centered with flex center -
thats fiddle: http://jsfiddle.net/atav8vzz/4/
why html element class "vertical-align" not vertically centered?
<div class="container"> <div class="row"> <div style="background:green;" class="col-xs-4"> <h3 class="text-center">type 1</h3> </div> <div style="background:red;" class="col-xs-4"> <h3 class="text-center vertical-align">type 2</h3> </div> <div style="background:blue;" class="col-xs-4"> <h3 class="text-center">type 3</h3> </div> </div> </div> .vertical-align { display: ms-flex; display: flex; align-items: center; }
i guess depends you're trying achieve here. align-items
vertically. justify-content
horizontally.
see this example. have given <h3>
height, illustrate centred vertically.
Comments
Post a Comment