0

<a>単語の周りに境界線のあるボックスを配置するクラスを持つ 5 つのタグがあります。ボックスを非常に大きくする必要があり、テキストtext-align: centerは垂直方向ではなく水平方向に中央揃えにする必要がありました。

私はvertical-align成功しなかった。テキストをボックスの中央に移動するにはどうすればよいですか?

HTML

<a href="#" id="someid1" class="someclass">Small</a>
<a href="#" id="someid2" class="someclass">Medium</a>
<a href="#" id="someid3" class="someclass">Large</a>

などなど

CSS

#container a.someclass { border:1px #ACACAC solid;text-align:center; }
4

4 に答える 4

1

ul タグと li タグ、line-height と display: ブロックを使用する

http://jsfiddle.net/DAKfK/

于 2012-09-26T21:14:14.710 に答える
1

あなたの箱はどこですか？各「タグ」をブロック要素内にラップする必要があります。ブロック要素内に入ると、 を使用vertical-align: middle;して垂直方向に中央揃えできます。さらに、絶対位置またはパディングを使用して垂直方向に中央揃えにします。

<div style="vertical-align: middle;">
<a href="#">text</a>
</div>

また、idパラメータは一意です。つまり、1 ページにつき 1 回しか使用できません。

于 2012-09-26T20:56:26.807 に答える
1

をコンテナline-heightの と同じピクセル値に設定します。height必要ありませんpadding。

于 2012-09-26T21:05:17.303 に答える
1

パラメータが揺れる(line-heightメニュー項目が複数行にならない場合) - DEMO

a.someclass {
    border: 1px #ACACAC solid;
    display: inline-block;
    text-align: center;
    height: 60px;
    line-height: 60px; /* the same as the height */
    width: 150px;
}
于 2012-09-26T21:07:16.690 に答える