2

私は、div (幅: 275px、高さ: 75px、境界線: 1px solid) で構成されるメニュー システムに取り組んでいます。タグとdisplay:blockプロパティを使用して、div全体をクリック可能にしたい(以下のコードを参照)。一部のメニュー エントリは複数行のテキストですが、縦方向に揃えることができません。基本的なコードは次のとおりです。

.div {   
    width: 275px;
    height: 75px;
    border: 1px solid #000; 
    text-align: center;
    float: right;
}

<div class="div">
    <a style="display: block; width: 100%; height: 100%" href="#">link..</a>
</div>

私は次のことを試しました：

  1. line-height: 75px: 複数行のテキストでは機能しません
  2. display: table および vertical-align: middle は、-tag の 100% の幅と高さでは機能しません。

私は実際にラッパーの div やテーブルなどを使って他の多くのコードを試しましたが、成功しませんでした。それ以外の場合は、javascript (onclick="location.href") を使用したくありません。

ありがとう！

4

2 に答える 2

1

すでに試したことでそれを行うことができます。vertical-align: middle;'、高さを 100% ではなく 75px に設定するだけです。

于 2013-07-18T10:58:23.813 に答える
0

display:table-cell を使用して、垂直方向に中央揃えの複数行テキストを実現します。

JSFiddleデモ

CSS :

div {   
    width: 300px;
    height: 200px;
    border: 1px solid #000; 
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
于 2013-07-18T11:27:22.820 に答える