css cssで中央寄せ

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

投稿日:2019年8月2日 更新日:

Pocket

 

うも、チャーさんです。

 

あなたは縦に中央寄せできるcssを、

探していませんか?

 

この記事ではお手軽に縦の中央寄せができる、

cssを紹介しています。

 

 

なのでこの記事を読めば、

あなたはweb制作など縦の中央寄せをすることが、

できるようになるでしょう。

 

ということで、あなたが、

縦の中央寄せをしたいと思っているなら、

このまま下にスクロールし読んでみてください。

 

スポンサードサーチ

cssで中央寄せ縦をやってみた(文字に)

 

でまずは結論からです。

 

cssで縦の中央寄せにするには、

display:flexとalign-self:centerを使うとできます。

 

ということで、早速実例を見せます。

 

縦 中央 css

 

はい、上記画像をみていただいて、

わかる通り、本文というテキストが、

縦に中央寄せされてますね。

 

(縦の中央がわかりやすいように、

横にdivで作ったボックスをおきました)

 

 

このようにflexのalign-self:centerは

縦に中央寄せすることが可能なcssなのです。

これは文字だろうと画像だろうとです。

 

とにかく要素を縦に中央寄せできます。

 

しかも便利なことにレスポンシブ対応してるので、

縦に中央をキープしたいならこれを使うのが便利ですね。

 

 

ではここからは具体的なやり方についてです。

 

スポンサードサーチ

縦に中央寄せする具体的な手順

 

やり方を簡潔にいうと、

 

親要素にdisplay:flexを指定し、

子要素にaling-self:centerを指定するです。

 

詳しく解説します。

 

 

flexで縦の中央寄せをするには、

まずは親要素と子要素を用意する必要が、

あります。

 

例えば以下のようにです。

 

<div class=”flex”>
 <div class=”box”>本文</div>
 <div class=”tate_center”>本文</div>
</div>

 

そして、親要素と子要素を用意したら、

上記の例のように、親要素にまず、

display:flex;を指定します。

 

上記例では、

.flex {

 display:flex;

}

という感じです。

 

 

そして、次に子要素に、

align-self:center;を指定します。

 

これはあなたが縦に中央寄せしたい、

そう思ってる子要素にこのcssを指定します。

 

例を出すとこんな感じで、

 

<div class=”flex”>
 <div class=”box”>本文</div>
 <div class=”tate_center”>本文</div>
</div>

 

.tate_centerというクラス名がついてる

divを縦に中央寄せしてます。

 

 

とゆうことで、上記をまとめると、

親要素にdisplay:flexを指定し、

縦に中央寄せしたい子要素にalign-self:center;をする。

 

になります。

 

そうすると縦の中央寄せが可能になります。

 

 

スポンサードサーチ

まとめ

 

縦の中央寄せを可能にするcssですが、

flexのalign-self:center;を使えば、

縦に中央寄せが可能です。

 

他にもtable-cell、vertical-align:middle;

などを使えば縦の中央寄せは可能ですが、

flexが使い勝手がいいので、紹介しました。

 

 

ということで、縦の中央寄せがわかったと思いますので、

早速あなたの方でもやってみましょう。

 

実際にあなた自身が手を動かしてやると、

スキルアップになりコーディング関係の仕事を、

獲得したり、その仕事で稼いだりできますよ。

 

 

そして、復習になりますが、縦の中央寄せのcss、

やることは簡単です。

 

 

まずは親要素と子要素を用意し、

親要素にdisplay:flex;を指定。

 

そして縦に中央寄せしたい子要素に、

align-self:center;を指定する。

 

すると縦に中央寄せできますよ。

 

 

ということで、縦の中央寄せにするcssでした。

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

 

チャーさん

-css, cssで中央寄せ


スポンサードサーチ

関連記事

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

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

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

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

cssを動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

no image

cssスマホ時のフォントサイズはこのサイズが良さげ

  どうも、チャーさんです。   あなたはcssのスマホのフォントサイズを、 どれぐらいにすればいいか、 と疑問に思っていませんか?     この記事では、迷っ …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

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

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

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

cssで画像を中央寄せできないを一瞬で解決する方法「コピペOK」

どうもチャーさん(@chaa___san)です。   あなたはcssで画像の中央寄せができないと、 悩んでいませんか?   この記事ではそんな悩みを解決し、 一発で画像を中央寄せで …

最新記事

チャーさん

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

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

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