![Position~absoluteで要素でセンタリング](https://boonboonblog.com/wp-content/uploads/2022050702-1024x576.jpg)
画像やテキストを重ね合わせることができる CSS ( Position~absolute )はとても便利なCSSですが、要素(ブロック)の位置がクリアされてしまうため。センタリングする方法に迷うことがあります。
画像や文字を重ね合わせる方法はこちら
-
-
【WordPressで簡単】画像の上に画像や文字を重ねて表示する方法(オシャレなサイトに変身)
画像や文字を重ね合わせることで、スマートでスタイリッシュな表現ができ、読者に「かっこいい」と思ってもらえるページを作ることが可能です。HTML と CSS で実現する方法と、WordPress で応用する方法を紹介します。
続きを見る
\ココナラ成功パターンを詳しく見たい方は こちら をクリックしてください/
Position~absolute でセンタリングする方法
する方法
Position~absolute で要素(ブロック)をセンタリングする方法は簡単です。考え方を先に解説します。
最初に左から 50% の位置にセンタリングしたい要素(ブロック)を配置します。「left : 50%」をCSSで指定することで上記の配置になります。
さらに要素の%0%の幅だけ左に移動すると、ちょうどセンタリング位置に移動します。「transform : translateX(-50%)」をCSSで指定することで要素が左に50%移動します。
サンプルコード
Position~absolute でセンタリングするサンプルです。
X 方向にセンタリングするサンプル
<div class="myContainer">
<div class="myCenteredElement">
これは中央に配置された要素です
</div>
</div>
<style>
.myContainer {
position: relative;
width: 100%;
height: 210px;
border: 2px solid red;
}
.myCenteredElement {
position: absolute;
left : 50%;
transform: translateX(-50%);
border: 2px solid darkblue;
}
</style>
Y 方向にセンタリングするサンプル
<div class="myContainer">
<div class="myCenteredElement">
これは中央に配置された要素です
</div>
</div>
<style>
.myContainer {
position: relative;
width: 100%;
height: 210px;
border: 2px solid red;
}
.myCenteredElement {
position: absolute;
top : 50%;
transform: translateY(-50%);
border: 2px solid darkblue;
}
</style>
X / Y 方向にセンタリングするサンプル
<div class="myContainer">
<div class="myCenteredElement">
これは中央に配置された要素です
</div>
</div>
<style>
.myContainer {
position: relative;
width: 100%;
height: 210px;
border: 2px solid red;
}
.myCenteredElement {
position: absolute;
top : 50%;
left : 50%;
transform: translate(-50%, -50%);
border: 2px solid darkblue;
}
</style>
まとめ:Position~absoluteで要素(ブロック)をセンタリングする方法
画像やテキストを重ね合わせることができる CSS ( Position~absolute )はとても便利なCSSですが、要素(ブロック)の位置がクリアされてしまうため。センタリングする方法に迷うことがあります。
Position~absoluteで要素(ブロック)をセンタリングする方法です。
ブラウザの幅が変化してもちゃんとセンタリングしてくれる便利なコードです。
ブログの作り方などについてココナラにて「支援作業」を販売しております。
よかったらご利用くださいませ。
Presented By Boon Boon Blog .Com
広告の設置・収入について
当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。
当サイトは Google アドセンスを利用し、広告により収入を得ています。
当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。