HTMLセンターテキスト–CSSでDivを垂直に揃える方法

HTMLとCSSの世界では、レイアウト構造と要素の分散がすべてです。通常、HTMLを使用してマークアップと構造を定義しますが、CSSは要素のスタイル設定と配置を処理するのに役立ちます。

この投稿では、HTML要素を中央揃えにし、CSSで垂直方向の配置を処理するさまざまな方法について少し学びます。

まず、テキストをCSSに合わせる方法を学びます。

次に、divとその他の要素を揃える方法について説明します。

そして最後にdiv、コンテナ内にテキストと一緒に配置する方法を学びます。

テキストを中央揃えにする方法

CSSを使用してテキストを中央揃えにする方法はたくさんあります。

Floatプロパティの使用

フロートは、テキストを揃える簡単な方法です。

レイアウトの右側にテキストを配置するにright  は、の値として使用するだけですfloat

テキストを左側に配置するにはleft、のようにを使用しますfloat:left。以下の例を見てください。

 .right { float: right; } .left { float: left; } // HTML Right Left

floatを使用してテキストを中央に配置するには、以下のように、margin-leftまたはmargin-rightを使用して作成  でき50%ます。

 .center { float: left; margin-left: 50%; } /* HTML*/ Center

Floatここでの使用法について詳しく知ることができます。

Text-alignの使用

text-alignテキストを整列するためのより便利でより具体的な方法です。次の例に示すように、テキストをまたcenterはのleftいずれかのright側に配置できます。

.right { text-align: right; } .left { text-align: left; } .center { text-align: center; } /* HTML */ 

Right

Center

Left

詳細については、をご覧くださいtext-align

整列する方法 div

そうですね、それを行う方法はたくさんあります。

Floatテキストの配置に使用するのと同じ方法で、div要素の配置にも使用できます。

Float仕事をしますが、CSSは私たちにもっと便利でエレガントなより良いオプションを提供します。聞いたことがありFlexboxますか?またはcss-grid?

これらの2つの方法は、CSSでレイアウトを調整および操作するための非常に最新の方法を提供します。Flexboxをさらに詳しく見てみましょう。

Flexbox  

Flexboxは、div–を整列させるための簡単で簡単な方法を提供します。これは、CSSでレイアウトを処理するためのこれまでの私のお気に入りの方法です(私は毎日使用しています)。

Flexbox上記と同じ例を再作成して、どのように機能するかを確認するために何をするかを見てみましょう。

例:

コード:

      Flexbox  .container { display: flex; } .container div { width: 33%; height: 60px; } .left { background: yellow; } .right { background: red; } .center { background: lightblue; } Left div centered div right div 

分解しましょう

  • を適用するために使用するdiv  親を常に定義display:flexしますFlexbox。そのため、親内のすべてのdivの子divFlexboxプロパティを使用して処理できるようにします。
  • flex-direction使用するrow要素は容器内に垂直に配置されることを意味し、デフォルトで方向を、。
  • このjustify-contentプロパティを使用するとdiv、次の例のように、の子をさまざまな方向に揃えることができます。
.container{ display: flex: justify-content:center /* flex-start, flex-end, space-between, space-evenly, space-around etc */ }
  • justify-content:center  要素をコンテナの中央に配置します。
  • justify-content:flex-start 左側のコンテナの先頭に要素を配置します。
  • justify-content:flex-end 右側のコンテナの端に要素を配置します。
  • justify-content:space-around 要素をコンテナに収め、すべての要素の間に等しいギャップを置きます。
  • justify-content:space-evenly 親コンテナ内の要素を同じスペース、同じ幅で均等に分散します。

上記の例は、グループとしてのすべての要素の子に適用されます。

divコンテナ内のシングルを整列させたい場合を想像してみてください。常にalign-self単一の要素を整列するために使用できます。

.container div{ align-self:center /* can have: flex-start, or flex-end*/ }

We can apply the same thing to a text with Flexbox as in the following example:

  .right{ display: flex; align-items: flex-end; flex-direction: column; } right div 

This is a great tweet by Julia Evans which illustrates centering in CSS in general:

Wrap up

There are many way to center elements in CSS. And you will always learn new things over time as you practice more and more.

So I recommend that you work through some examples from what you learned today so it sticks.

  • You should follow me Twitter ?
  • Check out My Github
  • Visit my Blog