0

左にフロートしたdivの中央にあるh1要素とpを垂直方向に整列させようとしていますが、垂直方向に整列してしまいます。テーブルセル表示と関係があると確信していますが、それなしで垂直方向に整列する方法がわかりません。

私のコードは私に与えます：

.
.
Heading Paragraph
.
.

が欲しいです：

.
.
Heading
Paragraph
.
.

ここに私のコードがあります：

CSS：

#HDRtext 
{
    float:  left;
    width: 30%;
    height: 335px;
    padding: 0;
    display: table;
    color:  white;
}

#HDRtext h1 
{
    font-family: Georgia;
    font-size: 2em;
    display: table-cell;
    vertical-align: middle;
}

#HDRtext p {
    display: table-cell;
    vertical-align: middle;
    font-size:1em;
    font-family: Georgia;
}

これがjsfiddleです：jsfiddle

4

4 に答える 4

3

これが例のあるページです： http：//jsfiddle.net/Z468Z/1/

クラスごとにIDを変更しましたが、cssでIDを使用するのは悪い習慣です。

私は個人的に、テーブル/テーブル行/テーブルセルの表示としてインラインブロックを好みます。

インラインブロックで中央を垂直に揃えるために知っておくべきこと：

  • コンテナの高さとラインの高さは同じサイズである必要があります。
  • 中央に配置する子は、「インラインブロック」タイプである必要があります。この子では、適切な行の高さを復元する必要があります。
  • 彼の子はブロックタイプにすることができます（私の例のように）
于 2012-06-21T15:11:46.033 に答える
2

それらを含むdivを垂直方向に整列させる必要があります（または、それらを別のdiv内に配置し、元のdivに配置します）。

于 2012-06-21T14:49:45.687 に答える
0

中央の要素を適切に垂直にするには、上からの高さの50％である絶対位置のdivと、divの全高の-50％のマージントップを持つオフセットdivが必要です。実例： http： //jsfiddle.net/jefffabiny/xXZfb/1/

于 2012-06-21T14:58:28.503 に答える
0

このページでは、下に向かって垂直に配置する方法について説明し、示しています。

于 2012-06-21T14:51:14.750 に答える