html - Vertically-aligned text does not correctly align for dynamically added content -
i saw many posts regarding how set child div vertically align text in middle using line-height, if text appending dynamically?
i have piece of code text keeps appending div.
i tried combinations :
- setting div's display : table-cell
- setting vertical-align : middle
- setting line height [works when text static] - the 1 appends dynamically not set text in middle.
here's fiddle sample code.
all need append text when button pressed. also, text should vertically aligned.
<input type="button" id="press" value="press me"> <div id="containerfortable"> <div id="r1"> <div id="r0c1" class="floatleft commonborder"></div> <div id="r0c2" class="floatleft commonborder"></div> <div id="r0c3" class="floatleft commonborder"></div> <div class="clearboth"></div> </div> <div id="r2"> <div id="r1c1" class="floatleft commonborder"></div> <div id="r1c2" class="floatleft commonborder"></div> <div id="r1c3" class="floatleft commonborder"></div> <div class="clearboth"></div> </div> #containerfortable{ margin:60px 0px 0px 50px; } .commonborder{ border:1px solid black; text-align:center; height:90px; width:130px; color:blue; display:table-cell; } #r0c1,#r2c1,#r3c1,#r4c1{ border-top-left-radius:10px; } #r0c3,#r2c3,#r3c3,#r4c3{ border-top-right-radius:10px; } #r1c1,#r2c1,#r3c1,#r4c1{ border-bottom-left-radius:10px; } #r1c3,#r2c3,#r3c3,#r4c3{ border-bottom-right-radius:10px; } #r0c1,#r0c2,#r0c3{ text-align:center; height:30px; width:130px; } #r1c1,#r2c1,#r3c1,#r4c1{ line-height: 75px; } $('#r0c1').html('expression'); $('#r0c2').html('is same as'); $('#r0c3').html('is not same as'); $('#r1c1').html('p + 2 ');
the line-height , height of div different, causing text become misaligned. is, #r1c1, #r2c1, #r3c1, #r4c1 selector applying line-height of 75px, while .commonborder selector applying height of 90px.
removing height: 90px .commentborder selector should fix issue.
Comments
Post a Comment