公開日: 2017年10月04日
更新日: 2023年12月26日

CSS／HTML

同じ行に「中央寄せ」と「右寄せ（左寄せ）」を両立させるCSS

今日は、実際の案件で使ったCSSテクニックを紹介します。
タイトルを見て何言ってんだと思った方もいるかもしれませんが要は2つの子要素を上の画像のように一つは中央寄せ、もう一つは片側に寄せたいという話です。

1 「左寄せ」と「右寄せ」なら…
- 1.1 floatの場合
  - 1.1.1 ソース
  - 1.1.2 表示
- 1.2 flexboxの場合
  - 1.2.1 ソース
  - 1.2.2 表示
2 「中央寄せ」と「右寄せ」なら…

「左寄せ」と「右寄せ」なら…

floatの場合

ソース

HTML

<div class="parent">
    <div class="left">左寄せ</div>
    <div class="right">右寄せ</div>
</div>

</div>

CSS

.parent {
    display: flow-root;
}
.left {
    float: left;
}
.right {
    float: right;
}

.parent {

display: flow-root;

}

.left {

float: left;

}

.right {

float: right;

}

表示

左寄せ

右寄せ

flexboxの場合

ソース

HTML

<div class="parent">
    <div class="left">左寄せ</div>
    <div class="right">右寄せ</div>
</div>

</div>

CSS

.parent {
    /* ベンダープレフィックスは省略 */
    display: flex;
    justify-content: space-between;
}

.parent {

/* ベンダープレフィックスは省略 */

display: flex;

justify-content: space-between;

}

表示

左寄せ

右寄せ

よくあるパターンですね。

じゃあ片方を中央寄せしたい時はどうするべきか。
floatにはcenterなんて無いし…

「中央寄せ」と「右寄せ」なら…

どうするかというと2パターン考えられます。
1. 「flexbox」と「position」の併せ技
2. グリッドレイアウト
です。

「flexbox」と「position」の併せ技

ソース

HTML

<div class="parent">
    <div class="center">中央寄せ</div>
    <div class="right">右寄せ</div>
</div>

</div>

CSS

.parent {
    /* ベンダープレフィックスは省略 */
    display: flex;
    justify-content: center; /* 子要素を中央揃え */
    position: relative;
}
.right {
    position: absolute;
    right: 0; /* 右寄せ */
}

.parent {

/* ベンダープレフィックスは省略 */

display: flex;

justify-content: center; /* 子要素を中央揃え */

position: relative;

}

.right {

position: absolute;

right: 0; /* 右寄せ */

}

表示

中央寄せ

右寄せ

親要素に justify-content: center; を指定して子要素を中央揃えにし、片側に寄せたい子要素を position で位置を指定するだけです。
左寄せにするなら right ではなく left: 0; と指定するだけですね。

グリッドレイアウト

ソース

HTML

<div class="parent">
    <div class="center">中央寄せ</div>
    <div class="right">右寄せ</div>
</div>

</div>

CSS

.parent {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}
.center {
    grid-column: 2;
    justify-self: center;
}
.right {
    grid-column: 3;
}

.parent {

display: grid;

grid-template-columns: 1fr auto 1fr;

}

.center {

grid-column: 2;

justify-self: center;

}

.right {

grid-column: 3;

}

表示

中央寄せ

右寄せ

まとめ

グリッドレイアウトの登場以降はグリッドレイアウトで実装した方がスマートに感じます。
今後も実戦で使ってみたCSSを紹介していきます。

それではまた次回。

この記事を書いた人
最新の記事

熊田賢太郎

株式会社クロコロールのコーディングを担当。デジタルハリウッドを卒業後、クロコロールに入社。HTML、CSS、JavaScript、Jquery、PHPの言語を使用。現在は、WordPressエンジニアとして、Webサイト制作、既存サイトのカスタマイズやリニューアル、テーマの制作、サイトのWordPress化、カスタム投稿作成、保守などを担当。