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

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>タグとか、たまに邪魔ですよねぇ。。今更全部取る設定するわけにもいかんし。。う〜ん。。



関連記事

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


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

記事を読む▷


スマホ、携帯からタップ(クリック)で電話を発信する、htmlの記述方法 コピペでOK!!


スマホ等のタブレット、また携帯で、電話番号をタップ(クリック)して直接かけるhtmlの記述方法です。 …

記事を読む▷


Thumbnail_Icon_firefox_bug

Firefoxでなぜか消える、Tableのborder対策、cssのみでの解決法


Firefoxでなぜか消えてしまうTableのborder、いつもじゃなく、たまになのでこれがやっかい。。原因がわからな…

記事を読む▷


WP-OGPの設定方法:WPの投稿記事のサムネイルをFBできちんと表示させる


この記事は前回からの続きなのですが、、、実は1年経ってます。。下書きを途中まで書いてたのですが、あまりにも大変で途中で終…

記事を読む▷


お名前.comで “Whois情報公開代行” の設定にチェックを入れ忘れて登録した時の対処方法


先日、こちら で少し書いたのですが、お名前.comでドメインを取った時に、 "Whois情報公開代行" の設定にチェック…

記事を読む▷


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


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

記事を読む▷


WP Social Bookmarking Lightを好きな場所に設置、移動する方法


WP Social Bookmarking Lightを好きな場所に設置、移動する方法です。 以前、自分で管理している…

記事を読む▷


z-index が効かない時の対処方法


z-index が効かない時がちょくちょくあります。でも、仕事でそういう場合に遭遇すると、その場しのぎで対処法を見つけて…

記事を読む▷


no image

テキスト、画像を選択できなくする方法


facebookで『続きを読みたかったらいいねを教えてね!』みたいな記事がよくありますが、必ずそういう記事に限ってコピペ…

記事を読む▷


301_re-direct

301リダイレクトでサイトのリニューアル(ドメインを変更)する!:.htaccessの記述、設定方法、順序etc.


最近サーバーの見直し、ドメイン管理会社の見直し、サイト内の見直し等々しているのですが、以前から使用していたサーバー(エク…

記事を読む▷


Message

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

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

PAGE TOP