画像やテキストを中央(上下左右真ん中)に配置する方法
- 2015/10/11
- HowTo, Webデザインテクニック
- センタリング
普通にtext-align:center;や、margin:0 auto;等でテキストや写真を真ん中に配置したつもりでも、なぜか真ん中にいかない事が多々あります。でもこの方法は、CSSの position と transform を使って中央(上下左右真ん中)に配置するので、幅や高さを変更しても常に中央に表示されるので、これは便利!!
ってことで覚え書きです。
記述方法
テキストを中央(上下左右真ん中)に配置する時
まずはHTML。例えば、
<div class="wrapper"> <div class="box"> <p>テキストを中央(上下左右真ん中)に配置したい</p> </div> </div>
CSSは
.wrapper { height:300px; border:10px solid #777; } .box { text-align:center; }
こうした場合、
テキストを中央(上下左右真ん中)に配置したい
となります。text-align:center;で左右の中央にはきましたが、今回はこれを 上下左右真ん中 にしたいので、CSSにこう記述します。
.wrapper { position: relative; height:300px; border:10px solid #777; } .box { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); word-break: keep-all;/*テキストを折り返さないように*/ }
これで、
テキストを中央(上下左右真ん中)に配置したい
こうなります。他にも方法はあるでしょうが、こんな方法もあるよ!ということで。
画像を中央(上下左右真ん中)に配置する時
まずこちらもHTML。例えば、
<div class="wrapper"> <div class="none"> <p><img src="画像のURL" ></p> </div> </div>
CSSは
.wrapper { position: relative; height:300px; border:10px solid #777; } .box { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
これで、

画像も同じく 上下左右真ん中 になります。
ちなみに、ソースはWP独特のクセや、違うcssと干渉しないように、<p>タグを足したり等、少々リセットしています。
しかしwpのいらん<p>タグとか、たまに邪魔ですよねぇ。。今更全部取る設定するわけにもいかんし。。う〜ん。。
Google AdS
関連記事
-
WordPressのプラグインなしで、Jetpackと共存してFacebookやTwitter CardのOGPの設定をする!
先日、ようやく気になっていたOGPの設定を、WP-OGPのプラグインを変更して使えるようにしたのですが(詳細は こちら …
-
【2021】FacebookやTwitter CardのOGPの設定をする!チェックツールURLも!プラグインなし
今まで何度も『OGP』の設定に関する記事は書いてきたのですが、新規サイト立ち上げで参考にしようと見てみたら、Facebo…
-
ページネーションがおかしい!次のページに行かない原因と解決方法|WP-Pagenavi・表示設定を見直す
今まで何度もWordPressのテンプレートをカスタマイズし、問題なくページネーションは機能していたのですが、なぜか今回…
-
<head>タグの記述例=順番等もきちんと考えた雛形(テンプレート)
一度サイトを作ってしまうと、あまり見直すことのないheadタグ内の記述。新たなLPを作ったりする時でも、以前作ったものの…
-
正しいショートハンドの書き方のまとめ
コピペ用、ショートハンドのまとめです。 まずはややこしい【background】プロパティから。 【backgr…