問題
positionで中心地点から位置を設定するには？
解決策
- 親要素に「position: relative;」を設定します。
- 親要素の中をさらに要素で囲い、その要素に「position: absolute;」＋上下左右の地点を0にし、幅と高さを0にします。
- 子要素に「position: absolute;」を設定し、中心地点からの座標で位置を設定することができます。
中心地点から位置を設定したい。
positionで中心地点から位置を設定する方法をご紹介します。
DEMOはこちら
左に寄せる
テキスト
左に寄せる
テキスト
HTMLはこちら
親要素「posi_center-box」の中をさらに要素「center-box」で囲います。
<div class="posi_center-box">
<div class="center-box">
<p class="left">左に寄せる<br>テキスト</p>
<p class="right">左に寄せる<br>テキスト</p>
</div>
</div>CSSはこちら
- 親要素である「posi_center-box」に「position: relative;」を設定します。
- 要素「center-box」に「position: absolute;」＋上下左右の地点を0にし、幅と高さを0にします。
- 子要素に「position: absolute;」を設定します。
これにより、中心地点からの座標で位置を設定することができます。
.posi_center-box{
position: relative;
width: 260px;
height: 260px;
background-color: #fef5f2;
}
.posi_center-box .center-box{
width: 0;
height: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.posi_center-box .center-box .left{
width: 100px;
position: absolute;
top: 0;
left: -110px;
}
.posi_center-box .center-box .right{
width: 100px;
position: absolute;
top: 0;
right: -110px;
}
コメント