0

テキストの高さがわかっている場合、div 内でテキストの中央を垂直方向に揃える方法を知っています。テキストの高さが 20px だとします。

テキストをスパンでラップします。スタイルの div とスパン。

div {
     position: relative;
}
span {
    display: block
    position: absolute;
    top: 50%;
    height: 20px;
    margin-top: -10px;
}

今、私はレスポンシブにテキストを揃えたいと思っています。私が欲しいのは、テキストのフォントサイズが本文の高さに比例することです。次のスタイルがあるとします。

body {
    font-size: 100%;
}
span {
    font-size: 1.5em;
}

次に、ウィンドウ サイズが変更されたときに body の font-size を変更します。この状況では、テキストの高さは決定されません。次に、テキストの中央を垂直方向に揃える方法は?

JavaScript を使用してスパンの高さとマージントップを動的に変更できることはわかっています。しかし、ウィンドウサイズが変更された後にこれを行う必要があります。次に、ウィンドウサイズが変更された可能性があり、ユーザーはテキストが中央に表示されず、JS コードが実行され、テキストが div の中央にジャンプしました。これは、受け入れられる解決策ではない可能性があります。

純粋な CSS ソリューションがあるかどうか知りたいです。

次のスタイルを使用して、テキストの中央を垂直方向に揃えることができると思います。

div {
    display: table-cell;
    vertical-align: middle;
}

しかし、このソリューションでは、div のマージンが適切にレンダリングされません。そしてセマ​​ンティックは正しくありません。

それで、完璧な解決策はありますか？

4

3 に答える 3

0

flex boxを使用すると、次のことができます: JSBIN

基本的に、コードは次のとおりです (必要に応じてプレフィックスを追加することを忘れないでください)。 

html, body { height: 100%; margin: 0px; }

body {
  display: flex;
  justify-content: center; /* horizontal centering */
}

div {
   align-self: center; /* vertical centering */
}
<body>
  <div>Centered</div>
</body>

于 2015-08-15T06:47:51.393 に答える