web-dev-qa-db-ja.com

フローティングdivのコンテンツを垂直方向の中央に配置

フローティングdivのコンテンツを正確に中央揃えするにはどうすればよいですか（高さはわかりません）。

非常に単純なHTMLとCSSがあります（このフィドルを参照してください： http://jsfiddle.net/DeH6E/1/ ）

<div class="floating">
    This should be in the middle
</div>
​
.floating {
    height: 100px;
    float: left;
    border: 1px solid red;
    vertical-align: middle;
}   ​

「これは真ん中にあるべきです」という文を真ん中（垂直方向の中央）に表示するにはどうすればよいですか？ vertical-align: middleは機能していないようです。私が試してみました display: table-cellそしてそれも機能しませんでした。この問題を解決する最良の方法は何ですか？他のHTMLタグを挿入しないようにしたいので、CSSを介してのみ行ってください。

（明確にするために：コンテナの実際の高さはわかりませんが、100pxは単なる例です）

EDIT：私に理解してもらいたいので... Webページをデザインするときは常に、HTMLがコンテンツを保持し、 CSSは視覚スタイルを担当します。それらを一緒に混ぜたり、もう一方を有効にするためだけに使用したりすることはありません。この場合、私もこのルールに固執したいと思います。 CSSだけにHTML要素を挿入したくありません。

csscss-floatcss-positionvertical-alignment
21
Pavel S.

他は正しいです 2つのDOM要素をネストする必要があります これにより、センタリングを制御するオプションが増えます。コードは次のとおりです。

.floating {
  display: table;
  float: right;
  height: 200px;
  width: 400px;
  border: 1px solid red;
}
.floating p {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center;
}
<div class="floating">
    <p>This is the proper way that validates and breaks across multiple
    lines, if the text is longer than just a few words and still
    should be vertically centered. Here, it's also horizontally
    centered for added joy.</p>
</div>
12
Systembolaget

<p>内にテキストを追加します。

[〜＃〜] html [〜＃〜]

<div class="floating">
    <p>This should be in the middle</p>
</div>

[〜＃〜] css [〜＃〜]

.floating {
    height: 100px;
    border: 1px solid #f00;
    display: table-cell;
    vertical-align: middle;
}
​
8
Henrik Ammer

あなたが高さを知っていれば、

line-height:100px;

そうでない場合は、レンダリング後にjavascriptを使用して行の高さを設定します。

http://jsfiddle.net/DeH6E/4/

6
maxisam

私はこれに対する解決策も探していましたが、最終的にはこれを思いつきました：

http://jsfiddle.net/w6j9mgjp/1/

.floating {
    height: 100px;
    float: left;
    border: 1px solid red;
}

.floating::before {
    content: "a";
    display: block;
    visibility: hidden;
    height: 50%;
    margin-top: -.7em;
}

ただし、1行のテキストに対してのみ機能します。

2
Spongman

http://jsfiddle.net/DeH6E/2/

div内のテキストは独自のdivタグ内にある必要があり、そのdivタグはdisplay：table-cellに設定する必要があります。およびvertical-align：middle;一方、.floating divはdisplay：tableとして設定する必要があります。

または、pタグまたは他の種類のフォーマットタグを設定して、span、pなどのテキストを含めることができます

1
PhazingAzrael

擬似セレクターで遊んでください。

.floating {
    height: 100px;
    float: left;
    border: 1px solid red;
}

.floating::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
1
dsaket