画像やテキストを中央(上下左右真ん中)に配置する方法

LINEで送る
Pocket

普通に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%);
}

これで、

WebデザインABC testイメージPurple

画像も同じく 上下左右真ん中 になります。

ちなみに、ソースはWP独特のクセや、違うcssと干渉しないように、<p>タグを足したり等、少々リセットしています。
しかしwpのいらん<p>タグとか、たまに邪魔ですよねぇ。。今更全部取る設定するわけにもいかんし。。う〜ん。。



関連記事

resolution-list_00

2018最新版:スマホ・タブレットの解像度一覧表(画面サイズの割合)


最近はレスポンス対応が当たり前になってきて、メディアクエリの記述をしない方が少なくなってきましたが、そのページごとにブレ…

記事を読む▷


WordPressのメニューを、footer等用に作成して追加する方法


WorPressのデフォルトでは、gnavi(グローバルナビ)にメニューを追加し、表示させることはできますが、foote…

記事を読む▷


wordmork.itの画像3

wordmark.it でフォントを選ぶ方法


フォント選びって結構大変ですよね。使用するフォントによって、そのサイトなりデザインの印象が変わってくるので、色選びもそう…

記事を読む▷


GoToTopBG_animation2のgif画像

CSSスプライトで、スムーズに画像を切り替える


マウスオーバーした時などに、画像が上手く切り替わらない時、よくありませんか?ブラウザや、PCの性能によっても変わってくる…

記事を読む▷


WordPressでGIFアニメが動かない時の対処法


今回アイキャッチ画像にGIFアニメを登録したのですが、登録時、また、メディアライブラリ内ではしっかりGIFアニメとして動…

記事を読む▷


アイキャッチ_RSSImport

WordPress:プラグイン”RSSImport”を使って気になるサイト等の最新情報を表示させる方法


前回はRSSのボタンを自分のサイトに表示させる方法を書いたのですが、今回は自分のサイト以外(勿論自分のものもOK!)の気…

記事を読む▷


正しいショートハンドの書き方のまとめ


コピペ用、ショートハンドのまとめです。 まずはややこしい【background】プロパティから。 【backgr…

記事を読む▷


日付を自動更新で表示させる! 簡単コピペ!!


先週『日付を毎月変えるの邪魔くさいし、サイトに書いてる日付とってくれへんやろか?』という依頼がありました。 とって…

記事を読む▷


backgroundプロパティの正しいショートハンドの書き方


ABCから始めよう!と言いつつ、ちょっとABCからの内容ではないかもしれませんが、今まで貯めてた "?" の解決法で、今…

記事を読む▷


2017最新版:SNS等の公式ロゴ(アイコン)素材のまとめ(Facebook, Instagram, Youtube, Twitter, Line etc.)


一度サイトを作ってしまうとなかなか更新せず使い回してしまうのが、この『SNSのロゴ(アイコン)』だと思うのですが、サイト…

記事を読む▷


Message

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

参考にさせていただいてるサイト

PAGE TOP