html - Div内のリンクを垂直方向に中央揃え

Question

左側の縦の列は私のサイトメニューシステムです。列は高さ100％のdivであり、さまざまな詳細がその上に配置されています。

ボタンはDIVで、背景に空白のボタンがあり、リンクが付いています。2つの異なるサイズのボタンがあります。大きいボタンは高さ60ピクセル、小さいボタンは30ピクセルです。CSSを使用すると、ボタンのDIVの高さに関係なく、リンクを垂直方向の中央に配置できますか？

私はここを見て、いくつかのCSSサイトとAndroidアプリを使用しました。ここのサイトは私ができないことを示唆していますが、CSSグループが垂直方向の中央揃え関数を作成しない理由が理解できません。

何かが足りないだけですか、それともCSSでは利用できないものを本当に取得しようとしていますか？

score 2 · Accepted Answer

サイトに基づいてline-height、テキストの垂直方向の位置を調整するために使用できます。

これを30pxの高さのリンクに適用してみてください。

line-height: 30px;

そしてこれは60pxの高さです：

line-height: 60px;

<div>さらに、タグ内にタグをネストしないでください<a>。

score 2 · Accepted Answer

これを使って：

.menubuttonthick{line-height:60px;}
.menubuttonthin{line-height:30px;}

これにより、すべてのリンクが中央に配置されます。

別の注意点として、現在、次の構造があります。

<a href="#">
  <div>text</div>
</a>

それは無効なHTMLです。私は「HTMLは常に有効でなければならない」タイプの人ではありませんが、それを簡単に修正できれば、有効にするのに害はないと思います。以下を使用する必要があります。

<div>
  <a href="#">text</a>
</div>

score 0 · Accepted Answer

これをCSSに追加します。ボタンの高さに関係なく機能します。

.menubar a div {
    display: table-cell;
    vertical-align: middle;
}

3 に答える 3