CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで要素を中央・水平・垂直に配置する方法を徹底解説

CSSを使えば、要素そのものや要素の中身を、水平方向・垂直方向・中央のいずれにも柔軟に配置できます。本記事では、それぞれの配置手法と実際のコード例をわかりやすく解説します。

水平方向の配置

  • インライン要素

    テキスト、aタグ、spanなどのインライン要素やインラインブロック要素は、CSSのtext-alignプロパティを使って水平方向に配置できます。

  • ブロックレベル要素

    divやpなどのブロックレベル要素は、CSSのmarginプロパティで水平方向に配置できます。ただし、要素の幅が親要素に対して100%だと配置の余地がないため、widthで適切な幅を指定しておく必要があります。

  • floatまたはpositionを使う方法

    複数の要素を左または右に寄せたい場合はfloatプロパティが有効です(中央揃えには非対応)。また、positionプロパティのabsolute(絶対配置)を使って水平方向の位置を細かく制御することもできます。

コード例

それでは、CSSによる水平方向の配置のサンプルコードを見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>CSS Horizontal Alignment</title>
<style>
.screen {
    padding: 10px;
    width: 70%;
    margin: 0 auto;
    background-color: #f06d06;
    text-align: center;
    color: white;
    border-radius: 0 0 50px 50px;
    border: 4px solid #000;
}
.seats span, .backSeats div{
    margin: 10px;
    padding: 10px;
    color: white;
    border: 4px solid #000;
}
.seats span{
    width: 120px;
    display: inline-block;
    background-color: #48C9B0;
}
.left{
    text-align: left;
}
.right{
    text-align: right;
}
.center{
    text-align: center;
}
.seats{
    text-align: center;
}
.backSeats div {
    background-color: #dc3545;
}
.leftFloat{
    float: left;
}
.rightAbsolute{
    position: absolute;
    right: 150px;
}
</style>
</head>
<body>
<div class="screen">Screen</div>
<div class="seats">
<span class="left">Adam</span>
<span class="center">Martha</span>
<span class="right">Samantha</span>
<div class="backSeats">
<div class="leftFloat">Premium 1</div>
<div class="leftFloat">Premium 2</div>
<div class="rightAbsolute">Premium 3</div>
</div>
</div>
</body>
</html>

出力結果

上記のコードをブラウザで表示すると、次のようになります。

CSSで要素を中央・水平・垂直に配置する方法を徹底解説

垂直方向の配置

  • インライン要素

    テキストやaタグなどのインライン要素・インラインブロック要素は、padding、line-height、vertical-alignのいずれかのプロパティを使って垂直方向に配置できます。

  • ブロックレベル要素

    divやpなどのブロックレベル要素は、marginプロパティ、flexレイアウトのalign-itemsプロパティ、あるいはposition:absoluteとtransformプロパティの組み合わせによって垂直方向に配置できます。

コード例

続いて、CSSによる垂直方向の配置のサンプルコードを見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>CSS Vertical Alignment</title>
<style>
.screen {
    padding: 10px;
    width: 70%;
    margin: 0 auto;
    background-color: #f06d06;
    text-align: center;
    color: white;
    border-radius: 0 0 50px 50px;
    border: 4px solid #000;
}
.seats span:not(.withPadding){
    margin: 10px;
    padding: 10px;
    color: white;
    border: 4px solid #000;
}
.seats span:not(.vertical){
    height: 40px;
    display: inline-block;
    background-color: #48C9B0;
}
.withPadding{
    padding: 20px 20px 0px;
    height: 20px;
    color: white;
    border: 4px solid #000;
}
.vertical{
    display: inline-table;
    background-color: #48C9B0;
    height: 40px;
}
.verticalText {
    display: table-cell;
    vertical-align: middle;
}
.withLineHeight{
    line-height: 40px;
}
.seats{
    text-align: center;
}
.backLeftSeat{
    background-color: #dc3545;
    max-height: 100px;
    height: 70px;
    margin: 20px;
    width: 300px;
    display: inline-block;
    position: relative;
    resize: vertical;
    overflow: auto;
    border: 4px solid #000;
}
.withPosition{
    position: absolute;
    top: 50%;
    left: 2px;
    right: 2px;
    color: white;
    padding: 20px;
    transform: translateY(-50%);
}
.backRightSeats{
    height: 122px;
    width: 800px;
    float: right;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.withFlex {
    background-color: #dc3545;
    border: 4px solid #000;
    margin-right: 10px;
    color: white;
    padding: 20px;
}
</style></head>
<body>
<div class="screen">Screen</div>
<div class="seats">
<span class="withPadding">Adam</span>
<span class="withLineHeight">Martha</span>
<span class="vertical"><p class="verticalText">Samantha</p></span>
<div>
<div class="backLeftSeat">
<div class="withPosition">Premium Readjustable Sofa</div>
</div>
<div class="backRightSeats">
<div class="withFlex">Premium Solo 1</div>
<div class="withFlex">Premium Solo 2</div>
<div class="withFlex">Premium Solo 3</div>
</div>
</body>
</html>

出力結果

上記のコードをブラウザで表示すると、次のようになります。

divの高さを調整していない場合：

CSSで要素を中央・水平・垂直に配置する方法を徹底解説

divの高さを調整した場合：

CSSで要素を中央・水平・垂直に配置する方法を徹底解説

中央揃え

要素を中央に配置したい場合は、ここまで紹介した水平方向・垂直方向のテクニックを組み合わせます。特に、flexboxのjustify-content:centerとalign-items:centerを併用する方法が、最もシンプルで確実な中央揃えの手段として広く使われています。状況に応じてmargin:autoやposition+transformの組み合わせも活用するとよいでしょう。

  1. CSSのwriting-modeとtext-orientationで縦書きテキストを表示する方法

    CSSでは、text-orientation: upright と writing-mode: vertical-rl を組み合わせて指定することで、文字を直立させたまま縦書きテキストを簡単に表示できます。日本語や中国語などの縦書きレイアウトを実現したい場合に非常に便利なプロパティです。基本構文CSSの writing-mode プロパティと text-orientation プロパティの構文は以下の通りです。Selector {    writing-mode: /*値*/    text-orientation: /*値*/ }各プロパティの役割wr

  2. Tkinterで垂直・水平スクロールバーを作成する方法を徹底解説

    スクロールバーは、アプリケーションに動的な操作性を持たせるために非常に便利なウィジェットです。Tkinterでは、垂直方向と水平方向の両方のスクロールバーを簡単に作成できます。スクロールバーは、Scrollbar()ウィジェットのオブジェクトを初期化することで生成されます。 水平スクロールバーを作成する場合は、orientオプションに「HORIZONTAL」または「VERTICAL」を指定して向きを設定します。さらに、対象となるウィジェット（TextやListboxなど）とスクロールバーを連携させる設定を行うことで、初めて実際に操作できるようになります。 コード例 # 必要なライブラリをイン