8

ボックスを作成し、行の高さを設定すると、テキストは自動的に垂直方向の中央に配置されます。ボックスの下部にテキストを設定する方法やトリックはありますか?

div {
    width: 100px;
    height: 100px;
    background: #eee;
    color: #333;
    text-align: center;
    line-height: 100px;
    vertical-align: text-bottom;
 }

<div>FoxRox</div>
4

4 に答える 4

18

2020年アップデート

CSS グリッド、フレックスボックス、または元の方法をline-height次のように使用できます。

body { display: flex } /* just to prettify */

div {
  margin: .5em;
  width: 6.25em; height: 6.25em;
  background: #eee;
  color: #333;
  text-align: center
}

.grid {
  display: grid;
  align-content: end;
}

.flex {
  display: flex;
  align-items: flex-end;
  justify-content: center
}

.lh { line-height: 11.5 /* 6.25*2 - 1.5 */ }
<div class='grid'>Hello</div>

<div class='flex'>Hello</div>

<div class='lh'>Hello</div>

あなたの場合、テキストのとを同じ値に設定することheightは、内のテキストを垂直方向に中央揃えする方法です。それが問題です。divline-height100pxdiv

解決策は、高さの 2 倍からテキストのサイズを引いた値に変更line-heightし、無駄を削除することvertical-alignです。

于 2012-05-25T19:13:15.243 に答える
9

pのタグでテキストを囲みますdisplay:inline-block。要素に設定vertical-alignしpます。

<div>
    <p>FoxRox</p>
</div>​

div {
    width: 100px;
    height: 100px;
    background: #eee;
    color: #333;
    text-align: center;
 }
p {
    display: inline-block;
    vertical-align: -80px;
}
​

デモ

于 2012-05-25T19:15:28.993 に答える
5

表示をテーブルセルに設定できます。たとえば、この CSS を試してください。

width: 100px; 
height: 100px; 
display: table-cell; 
vertical-align: bottom;

デモ: http://jsfiddle.net/Kawwr/

于 2012-05-25T19:17:18.537 に答える
2

https://stackoverflow.com/a/6116514/682480に対する私の回答を確認できます。

上記の回答のデモは次のとおりです。

外箱に使うのがコツですdisplay: table-cell。そうすれば、divでvertical-align: bottomandを使用できます。display: inline-block;

于 2012-05-25T19:17:08.647 に答える