html - CSS center vertically Div into a Div -
i have problem, need center vertically div containing "three:" respect div containig image, how can this?
here markup:
<div class="content"> <div class="tablediv"></div> <div class="onecolumn center"><h3>title</h3></div> </div> <div class="tablediv"> <div class="threecolumns left">one:</div> <div class="threecolumns center"> </div> <div class="threecolumns center">- - -</div> </div> <div class="tablediv"> <div class="threecolumns left">two:</div> <div class="threecolumns center"> </div> <div class="threecolumns center">- - -</div> </div> <div class="tablediv"> <div class="threecolumns left">three:</div> <div class="threecolumns center"> </div> <div class="threecolumns center"><img class="imageseason" src="http://www.videcom.com/portals/0/linux_u2.png"></div> </div> </div> using following stylesheet:
.center { text-align: center; } .left { text-align: left; } .right { text-align: right; } .imageseason { width: 50%; height: 50%; } .divtable { position: relative; clear: left; width: 90%; padding-top: 10px; padding-left: 15px; padding-right: 15px; } .onecolumn { float: left; width: 100%; padding-top: 10px; } .twocolumns { float: left; width: 50%; padding-top: 10px; } .threecolumns { float: left; width: 33.333333333%; padding-top: 10px; } .fourcolumns { float: left; width: 25%; padding-top: 10px; } .fivecolumns { float: left; width: 20%; padding-top: 10px; } this fiddle: jsfiddle snippet
use below css out :
.imageseason{ vertical-align:middle; } .threecolumns:before { content: " "; display: inline-block; height: 100px; //height according need vertical-align: middle; } .threecolumns { display: inline-block; height: 100px; //height according need vertical-align: middle; } 
Comments
Post a Comment