html - horizontal centering elements in div -
i wondering how center elements within div keep text left aligned.
here jfiddle of have far. want text in middle of div maintain left justification.
http://jsfiddle.net/mgcdu/5994/
html:
<div class="span4" id="middlefooter"> <div class="mcont" > <div class="mrow"> <h5 class="tcell"><b>useful links</b></h5> </div> <ul> <div class="mrow"> <li class="tcell"><a href="#">contact us</a></li> </div> <div class="mrow"> <li class="tcell"><a href="#">about us</a></li> </div> <div class="mrow"> <li class="tcell"><a href="#">copyright information</a></li> </div> <div class="mrow"> <li class="tcell"><a href="#">terms & conditions</a></li> </div> </ul> </div> </div> css:
#middlefooter { color: #ccc2a0; } .mcont { background-color: blue; } .mrow li { background-color: red; margin-left: auto; margin-right: auto; } .mrow h5 { display: table-row; background-color: yellow; } .tcell { display: table-cell; }
you can try - http://jsfiddle.net/gxgrl/
html:
<div class="span4" id="middlefooter"> <div class="mcont" > <div class="mrow"> <h5 class="tcell"><b>useful links</b></h5> </div> <ul> <li class="tcell"><a href="#">contact us</a></li> <li class="tcell"><a href="#">about us</a></li> <li class="tcell"><a href="#">copyright information</a></li> <li class="tcell"><a href="#">terms & conditions</a></li> </ul> </div> </div> css:
#middlefooter { color: #ccc2a0; } .mcont { background-color: blue; } li { background-color: red; display: block; text-align: center; } li { background-color: green; display: inline-block; margin: 0 auto; width: 170px; text-align: left; } .mrow { text-align: center; } .mrow h5 { display: inline-block; background-color: yellow; text-align: left; width: 170px; }
Comments
Post a Comment