web-dev-qa-db-ja.com

親コンテナーの高さに対するパーセンテージとしてマージンまたはパディングを設定する方法

私は次のようにしてcssで垂直方向の配置を作成することに頭を悩ませていました。

.base{
    background-color:green;
    width:200px;
    height:200px;
    overflow:auto;
    position:relative;
}

.vert-align{
    padding-top:50%;
    height:50%;
}

そして、次のdiv構造を使いました。

<div class="base">
   <div class="vert-align">
       Content Here
   </div>
</div>

これはこのケースではうまくいくように見えましたが、ベースdivの幅を増やしたり減らしたりすると、垂直方向の配置がうまくいかないことに驚きました。 padding-topプロパティを設定すると、パディングが親コンテナの高さのパーセンテージとして取得されることを期待していました。これは、このケースの基本ですが、上記の50パーセントの値は、パーセンテージのパーセンテージとして計算されます。幅。 :(

JavaScriptを使用せずに、パディングやマージンを高さのパーセンテージとして設定する方法はありますか？

htmlcssvertical-alignment
209
Ryan

その修正は、はい、垂直方向のパディングとマージンは幅に対して相対的ですが、topとbottomはそうではありません。

そのため、divを別のdivの内側に配置し、内側のdivにはtop:50%のようなものを使用します（それでもうまくいかない場合はpositionの問題を覚えておいてください）。

205
Camilo Martin

これは、必要な動作をエミュレートするための2つのオプションです。一般的な解決策ではありませんが、場合によっては役立つことがあります。ここでの垂直方向の間隔は、親ではなく外部要素のサイズに基づいて計算されますが、このサイズ自体は親に対して相対的である可能性があり、このようにして間隔も相対的になります。

<div id="outer">
    <div id="inner">
        content
    </div>
</div>

最初のオプション：疑似要素を使用します。ここでは、垂直方向と水平方向の間隔は外側に対する間隔となります。 デモ

#outer::before, #outer::after {
    display: block;
    content: "";
    height: 10%;
}
#inner {
    height: 80%;
    margin-left: 10%;
    margin-right: 10%;
}

水平方向の間隔を外側の要素に移動すると、外側の親に対して相対的になります。 デモ

#outer {
    padding-left: 10%;
    padding-right: 10%;
}

第二の選択肢：絶対位置を使用する。 デモ

#outer {
    position: relative;
}
#inner {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 10%;
    bottom: 10%;
}
31
user

少し異なる質問に対する答え：vh単位を使用して、viewportの中心に要素を埋め込むことができます。

.centerme {
    margin-top: 50vh;
    background: red;
}

<div class="centerme">middle</div>
30
willoller

子要素をその親要素から絶対位置に配置するには、親要素上の相対位置と子要素上の絶対位置を設定する必要があります。

それから子要素の 'top'は親の高さに相対的です。そのため、あなたは子供を自分の身長の50％上方に「翻訳」する必要もあります。

.base{
    background-color: green;
    width: 200px;
    height: 200px;
    overflow: auto;
    position: relative;
}
    
.vert-align {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}
    <div class="base">
        <div class="vert-align">
            Content Here
        </div>
    </div>

フレックスボックスを使用した別の解決策があります。

.base{
    background-color:green;
    width: 200px;
    height: 200px;
    overflow: auto;
    display: flex;
    align-items: center;
}
<div class="base">
    <div class="vert-align">
        Content Here
    </div>
</div>

あなたは両方の利点/不利益を見つけるでしょう。

10
alain

1行のテキストを中央揃えにする他の方法は次のとおりです。

.parent{
  position: relative;
}

.child{
   position: absolute;
   top: 50%;
   line-height: 0;
}

あるいは単に

.parent{
  overflow: hidden; /* if this ins't here the parent will adopt the 50% margin of the child */
}

.child{
   margin-top: 50%;
   line-height: 0;
}
3
rawiro

これは writing-mode プロパティで実現できます。要素のwriting-modeをvertical-lrなどの縦書きモードに設定した場合、両方のディメンションで、その子孫のパディングとマージンのパーセンテージ値は、幅ではなく高さに対する相対値になります。

の仕様から ：

。 。 。 CSS2.1の包含ブロック幅に関して常に計算される、marginおよびpaddingプロパティのパーセンテージは、インラインサイズに関して計算されます。 CSS3の包含ブロックの。

インラインサイズ の定義

インライン寸法での測定：横書きモードでは物理的な幅（横方向の寸法）を、縦書きモードでは物理的な高さ（縦方向の寸法）を指します。

サイズ変更可能な要素を使用した例。水平方向の余白は幅に対して、垂直方向の余白は高さに対して相対的です。

.resize {
  width: 400px;
  height: 200px;
  resize: both;
  overflow: hidden;
}

.outer {
  height: 100%;
  background-color: red;
}

.middle {
  writing-mode: vertical-lr;
  margin: 0 10%;
  width: 80%;
  height: 100%;
  background-color: yellow;
}

.inner {
  writing-mode: horizontal-tb;
  margin: 10% 0;
  width: 100%;
  height: 80%;
  background-color: blue;
}
<div class="resize">
  <div class="outer">
    <div class="middle">
      <div class="inner"></div>
    </div>
  </div>
</div>

縦書きモードを使用すると、要素の縦横比を一定に保ちながら、幅ではなく高さに合わせてサイズを拡大または縮小したい場合に特に便利です。

2
James T

50％のパディングはあなたの子供を中心に置きません、それは中心の下にそれを置きます。私はあなたが本当に25％のパディングトップが欲しいと思います。あなたのコンテンツが高くなるにつれて、たぶんあなたはスペースを使い果たしていますか？また、padding-topの代わりにmargin-topを設定してみましたか？

編集：決してマインド、w3schoolsサイトは言う

％包含要素の幅のパーセントでパディングを指定します

それで、それはいつも幅を使いますか？私は気づいたことがないだろう。

あなたがしていることはdisplay：tableを使って達成することができます（少なくとも最近のブラウザでは）。 テクニックはここで説明されています 。

1
SpliFF

これは非常に興味深いバグです。 （私の意見では、とにかくそれはバグです）いいね！

howとすると、Camilo Martinの答えをお勧めします。しかし、なぜに関して言えば、皆さんが気にしないのであれば、これについて少し説明したいと思います。

で CSSの仕様 私は見つけた：

「パディング」
Percentages：包含ブロックの幅を表します

…これは変ですが、大丈夫です。

したがって、親のwidth: 210pxと子のpadding-top: 50%を使用すると、計算値/計算値がpadding-top: 96.5pxになります。これは、予想される105pxではありません。

これは、Windows（他のOSについてはよくわかりません）では、一般的なスクロールバーのサイズがデフォルトの17px × 100%（または水平バーの場合は100% × 17px）に等しいためです。これらの17pxは減算されますbefore50%を計算するため、50% of 193px = 96.5pxとなります。

0
WoodrowShigeru