問題 × 解決策

positionで中心地点から位置を設定する方法

問題

positionで中心地点から位置を設定するには?

解決策

  1. 親要素に「position: relative;」を設定します。
  2. 親要素の中をさらに要素で囲い、その要素に「position: absolute;」+上下左右の地点を0にし、幅と高さを0にします。
  3. 子要素に「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はこちら

  1. 親要素である「posi_center-box」に「position: relative;」を設定します。
  2. 要素「center-box」に「position: absolute;」+上下左右の地点を0にし、幅と高さを0にします。
  3. 子要素に「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;
}

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

nineteen + three =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧