css - Table inside inline block breaks vertical alignment -
i meet problem project project, still don't understand why arises.
usually need header like:
<header><table><td valign="top">1st block</td><td valign="top">2nd block</td></table></header> information in 2nd block should placed on right edge, set text-align:right <td>, , create inline-block div inside it. text, divs , other elements inside said div located correctly, if create table , put them therein, said inline-block div gets 2-4 pixels higher should be. http://jsfiddle.net/njaqb2eu/4/
how fix it?
i think need reset elements. browser defaults causing trouble:
td, tr, table, th{ padding: 0; border-spacing:0; } .full_width{width:100%} .full_height{height:100%} .header{width:98%;height:60px;border:2px solid #eee} .header-center{width:70%;height:100%;margin:0 auto} .header-part_1{width:30%; display: table-cell; vertical-align: middle; } .header-part_2{width:70%; display: table-cell; vertical-align: middle;} .header-text{border:1px solid black} .inline-block{border:1px solid red}
Comments
Post a Comment