css cssのposition関係

positionで縦に中央寄せする方法はこちらです。

投稿日:2019年5月23日 更新日:

Pocket

うも、チャーさんです。

 

あなたはpositionで縦に中央寄せをしたいのに、

できずに困っていませんか?

 

 

この記事ではpositionで要素を縦に、

中央寄せする方法を書いています。

 

そのため、あなたがこの記事を読めば、

positionで縦に中央寄せできるようになります。

 

 

なので、あなたがpositionで縦に中央寄せしたいのに、

何をしても要素がそこから張り付いて動いてくれない、

と困っていたらこのまま読んでみてください。

 

スポンサードサーチ

positionで縦に中寄せするにはコレ

 

で結論から書きます。

positionで縦に中央寄せするには、

以下のことをすればできます。

 

  • 親要素にrelativeをつける
  • 縦に中央寄せしたい子要素にabsoluteをつける
  • (以下は全て縦に中央寄せしたい子要素につける)
  • width,heightをつける
  • topとbottomを0にする 
  • margin: autoを するです。

 

これらをすると、positionを使って、

要素を縦に中央寄せすることができます。

 

 

というわけで、早速具体的なコードと

実際の実行画面をみてましょう。

 

補足としてこの画像でいう、

黄緑のボックス(.box2)がpositionで縦に、

中央寄せした要素です。

 

(こちらはcss)

 

(こちらはhtml)

position縦中央寄せhtml

 

ちゃんと縦方向に中央寄せされてますね。

 

 

という訳で、

 

  • 親要素にrelativeをつける
  • 縦に中央寄せしたい子要素にabsoluteをつける
  • (以下は全て縦に中央寄せしたい子要素につける)
  • width,heightをつける
  • topとbottomを0にする 
  • margin: autoを するです。

 

上記をすることで、

positionを使い、要素を縦に中央寄せできます。

 

 

スポンサードサーチ

positionで縦に中央寄せする場合の注意

 

また注意としてpositionで縦に中央寄せする場合は、

要素がインラインかブロックかは重要なので、

そこはチェックするようにしましょう。

 

例えばインライン要素(aタグなど)はmarginで、

中央寄せできないです。

 

 

なので、あなたがpositionで縦に中央寄せしたい要素が、

インライン要素であれば、display:inline-blockや、

blockなどでブロック要素に変えましょう。

 

そして同時に、widthやheightをつけて、

高さと幅をつけてあげましょう。

 

そうでないと、positionで縦に中央寄せできないので、

注意するようにしてください。

 

 

スポンサードサーチ

positionで縦に中央寄せする手順

 

という訳でpositionを縦に中央寄せする方法を

書きます。

 

親要素を作りましょう。

 

まずはpositionで縦に中央寄せしたい要素を、

親要素の中に入れましょう。

 

(ちなみにこちらは中央寄せしたい場合は、要素の中で、

要素を中央寄せしたいシーンを想定してます)

 

子要素のチェックをしましょう

 

で次に、そしてその子要素が、

ブロック要素かインライン要素かをチェックしましょう。

 

例えばaタグとかだとインライン要素なので、

positionで縦に中央寄せするなら、

display:でブロックかインラインブロックに変える必要があります。

 

中央寄せの記述をつけましょう

 

で次に、親要素にrelativeをつけて、

positionで縦に中央寄せしたい子要素に、

 

absoluteをつける

width,heightをつける(インライン要素をブロックにした場合必須)

topとbottomを0にする 

margin: autoをつける

 

これらをやりましょう。

 

 

するとpositionで縦に中央寄せできるので、

縦の中央寄せしたいなら、やってみてください。

 

 

スポンサードサーチ

まとめ

 

それではまとめに入ります。

 

あなたがpositionで要素を縦に中央寄せしたいならば、

 

  • 親要素にrelativeをつける
  • 縦に中央寄せしたい子要素にabsoluteをつける
  • (以下は全て縦に中央寄せしたい子要素につける)
  • width,heightをつける
  • topとbottomを0にする 
  • margin: autoを するです。

 

これら上記をやりましょう。

 

 

position周りはややこしいこと多いですが、

使えるようになると便利なので、

ぜひ習得してみてください。

 

それでは、読んでもらってありがとうございました。

 

チャーさん

-css, cssのposition関係


スポンサードサーチ

関連記事

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

cssのレスポンシブの書き方「初心者向け記事」

どうも、チャーさんです。   あなたはcssのレスポンシブの書き方を、 知りたいと思っていませんか?   この記事では、cssのレスポンシブの書き方、 メディアクエリ、コードの具体 …

no image

cssのborderを初学者でもわかりやすいよう説明します

どうも、チャーさん(@chaa___san)です。   あなたはcssのborderとは何か? と疑問に思っていませんか?   この記事ではcssのborderについて、 初学者で …

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

cssスマホサイズ時のレイアウトはこれが良いですよ

どうも、チャーさんです。   あなたはcssを書いていて、 スマホサイズの時のレイアウトを、 どうしたらいいか悩んでいませんか?   この記事では、スマホサイズ時の 良いレイアウト …

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

cssでテーブルの行間を広げる方法

  あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いてるので、読め …

no image

画像の高さを揃える方法「簡単にできる方法です」

  どうも、チャーさんです。   あなたはサイズの違う画像の高さを、 揃える方法を探していますか?   この記事では、webページ制作で直面する、 画像の高さを揃える方法 …

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

no image

レスポンシブでフォントサイズを可変にする方法「手間いらず」

どうもチャーさんです。   あなたはレスポンシブで、 フォントサイズを可変にする方法を 探していますか?   この記事では、フォントサイズをレスポンシブで 自動調整できる方法を書い …

no image

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

cssで背景画像をレスポンシブ対応させる方法「1行記述すればok」

どうも、チャーさんです。   あなたはcssで背景画像をレスポンシブ対応させたい、 そう思っていませんか?   この記事では、cssで背景画像を、 レスポンシブ対応させる方法を書い …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。