web-dev-qa-db-ja.com

テキストの高さをdivの100％にしますか？

テキストをdivの100％の高さにしようとしていますが、機能しません。
body { font-size:?; }の100％になります。

Divの高さに従わせる方法はありますか？
divの高さはページ全体の4％であり、サイズを変更したり解像度を変更したりするときに、テキストがそれに続くことはありません。

csstextfontsheight
12
Daniel

希望する結果を得るには、次のコードを使用する必要がありました。

// Cache the div so that the browser doesn't have to find it every time the window is resized.
var $div = $('li.leaf.item');

// Run the following when the window is resized, and also trigger it once to begin with.
$(window).resize(function () {
   // Get the current height of the div and save it as a variable.
   var height = $div.height();
   // Set the font-size and line-height of the text within the div according to the current height.
   $div.css({
      'font-size': (height/2) + 'px',
      'line-height': height + 'px'
   })
}).trigger('resize');​

Joshuanhibbert @ css-tricksに助けてくれてありがとう！

9
Daniel

CSSを使用してこれを達成することはできません。その代わりにjavascriptを使用してください。

これらを確認してください：

  1. http://fittextjs.com/
  2. divのサイズに応じてフォントサイズを変更します
  3. divに収まるようにフォントのサイズを変更します
4
Libin

2015年には、 ビューポート単位 を使用できます。これにより、ビューポートの高さの1％を表す高さ単位でフォントサイズを設定できます。

だからあなたの場合はfont-size: 4vhは望ましい効果を達成します。

注：これは、質問したように親divに相対的ではなく、ビューポートの高さに相対的です。

3
andyError

CSSのみを使用してdivのサイズが100％のテキストが必要な場合は、font-sizeプロパティとline-heightプロパティを変更する必要があります。これが私の解決策です：

.divWithText {
    background-color: white;
    border-radius: 10px;
    text-align: center;
    text-decoration: bold;
    color: black;

    height: 15vh;
    font-size: 15vh;
    line-height: 15vh;
}
2
José Lozano Hernandez

相対位置と絶対位置を使用して、1行のテキストに対してこれを行うことができます。

<div class="div">
  <span class="middle-center">
    Center text
  </span>
</div>

css：

.div {
  height: 4%;
  position: relative:
  overflow: hidden;
}

.middle-center {
  position: absolute;
  top: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 13px;
  margin-top: -8px;
}
0
Andrey Izman