-1

我看到了很多关于如何设置子 div 以使用 line-height 在中间垂直对齐文本的帖子，但是如果我的文本是动态附加的呢？

我有一段代码，其中文本不断附加到 div 中。

我尝试了所有组合：

  1. 设置 div 的显示：table-cell
  2. 设置垂直对齐：中间
  3. 设置行高 [仅在文本为静态时有效] -动态附加的行高不会在中间设置文本。

这是我的示例代码的小提琴。

我需要做的就是在按下按钮时附加一些文本。此外，文本应垂直对齐。 

<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 ');
4

2 回答 2

1

您的 div的line-heightandheight是不同的，这会导致文本错位。也就是说，您的#R1C1, #R2C1, #R3C1, #R4C1选择器正在应用 a line-heightof 75px，而您的.commonBorder选择器正在应用 a heightof 90px。

height: 90px从选择器中删除.commentBorder应该可以解决问题。

jsFiddle

于 2013-05-10T12:58:23.107 回答
0

尝试，设置垂直对齐：中间；

.commonBorder{
    vertical-align:middle;
}
于 2013-05-10T12:34:03.733 回答