2

HTMLの一部を垂直方向の中央に配置するのにひどい問題があります。コードは以下です。ハイパーリンク内のコンテンツを垂直方向に揃える必要がありますが、方法がわかりません。何か助けてください! どうもありがとう

<a class="x" href="#">

    <span class="time">xxxx</span>
    <span class="time">yyyy</span>
    <span class="time">zzzz</span>

    <table>
    <tr>
      <td>
         <span class="Test">
           <span>HELLO</span>
         </span>
      </td>
    </tr>
    </table>

</a>
4

4 に答える 4

0

インライン要素内にブロックレベルの要素をネストして、適切な結果を期待することはできません。からテーブルを削除してから使用します。

a{vertical-align:middle;}

デモ

于 2012-07-12T10:07:52.323 に答える
0

ねえ今これdisplay:table-cellに慣れてvertical-align middle

このように

.x{
border:solid 10px red;
  display:table-cell;
  height:200px;
  width:300px;
  vertical-align:middle;
  text-align:center;
}

ライブデモ http://tinkerbin.com/XIT6R38u

詳細http://css-tricks.com/centering-in-the-unknown/

于 2012-07-12T10:08:36.807 に答える
0

上と下からdisplay:block同じで、これを達成することができます。padding

デモを参照してください：http：//jsfiddle.net/akhurshid/gqwSX/4/

CSS：

a {    
    display:block;
    padding: 50px;    
}​
于 2012-07-12T10:16:22.023 に答える
0

これは純粋な css2 で行うことができ、すべてのブラウザで動作します。

jsFiddle の例を次に示します。ブラウザの高さを変更してみてください。常にウィンドウに対して垂直方向の中央に配置されていることを確認できます。

あなたの .x コンテナの高さは 100px だと思います:

.x { position:fixed; top:50%; height:100px; margin-top:-50px; }

上部の css は 50% で、margin-top は高さの半分である必要があります。

于 2012-07-30T10:24:28.510 に答える