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

Popular posts from this blog

java - Plugin org.apache.maven.plugins:maven-install-plugin:2.4 or one of its dependencies could not be resolved -

Round ImageView Android -

How can I utilize Yahoo Weather API in android -