27

フローティング 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 は単なる例です)

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

4

6 に答える 6

18

他の人は正しいです。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>

于 2012-08-28T23:20:49.560 に答える
11

内にテキストを追加します<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;
}
​
于 2012-08-28T22:11:18.770 に答える
9

身長がわかれば

line-height:100px;

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

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

于 2012-08-28T22:17:26.380 に答える
3

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

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 行のテキストに対してのみ機能します。

于 2014-12-04T21:05:16.493 に答える
1

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

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

.floating::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
于 2016-10-23T18:17:30.900 に答える
1

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

div 内のテキストは独自の div タグに含める必要があり、その div タグを display:table-cell; に設定する必要があります。および垂直方向の位置合わせ:中央; .floating div は display:table; として設定する必要があります。

または、そこに ap タグまたはその他の種類の書式タグを設定して、テキストを含めることができます (例: span または p)。

于 2012-08-28T22:10:54.450 に答える