-1

行の高さを使用してテキストを中央に垂直に揃えるように子 div を設定する方法に関する多くの投稿を見ましたが、テキストが動的に追加されている場合はどうなりますか?

テキストがdivに追加され続けるコードがあります。

私はすべての組み合わせを試しました：

  1. div の表示の設定: table-cell
  2. vertical-align の設定 : middle
  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

0

vertical-align:middle; を設定してみてください。

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