-1

作成した「人工」テーブルのセルの中央にテキストを配置したいと考えています。(divを使っているので人工的)

CSS スタイルで、次の行を追加しました。

text-align:center;
vertical-align:middle;

これは通常、トリックを行います。ただし、この場合はそうではありません。ソースコード全体は次のとおりです。

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>

    <title>asd</title>
    <style>
        body {
            padding:0;
            margin:0;
        }  
     .Table {
       position:absolute;
       left:25px;
       top:275px;
       border:none;
       width:650px;
       height:40.99999px;
       border-top:1px solid black;
       border-left:1px solid black;
}
.Cell {
    float:left;
    width:107.3333px;
    height:40px;
    border-right:1px solid black;
    border-bottom:1px solid black;

    font-weight:bold;
    text-align:center;
    vertical-align:middle;
}       
    </style>
</head>

<body>  
      <div class="Table">
         <div class="Cell ">Hello</div>
         <div class="Cell ">Hello</div>
         <div class="Cell ">hihi</div>         
          <div class="clear"></div>
         <div class="Cell "></div>
         <div class="Cell "></div>
         <div class="Cell "></div>
      </div>   
</body>
</html>
4

6 に答える 6

3

vertical-alignブロック要素 (div) では機能しませんline-height: 40px;。代わりに使用できます。テキスト要素に親の高さに等しい行の高さを与えると、それは真に中央に配置されます

于 2013-07-30T06:53:49.177 に答える
0

これをcssに追加します

 display:table-cell
于 2013-07-30T06:56:09.843 に答える
0

display:table-cell;それが機能するためのプロパティを追加します

于 2013-07-30T06:56:13.107 に答える