CSS を使用した浮動要素の中央揃え

Migel Hewage Nimesha 2024年2月15日

CSS CSS Alignment

CSS を使用した浮動要素の中央揃え
まとめ

CSS は、HTML 要素が画面上でどのように見えるかをスタイル設定し、Web ページの複数のレイアウトを一度に制御するために使用されます。この記事では、CSS の float および center プロパティについて説明します。

CSS を使用した浮動要素の中央揃え

CSS の float プロパティは、HTML ドキュメントのコンテンツの配置と書式設定に使用されます。標準として、float プロパティには、left、right、none、inherit の 4つの値しかありません。

left と right の値は、コンテナーのそれぞれの左と右に要素をフロートさせます。

要素が浮動しないように、none 値が使用されます。最後に、inherit 値により、プロパティはその親の float 値を継承します。

float 要素で center 値を使用することはできません。そのため、この記事ではフロート要素を中央に配置する方法を探ります。

CSS で浮動要素を中央に配置する方法 1

コード例:

<!DOCTYPE html>
<html>
    <head>
        <title>html 3 column layout</title>
        <link rel="stylesheet" href="style1.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>

    <body>
      <h1>CSS float center</h1>
        <div class="container">
            <div class="float_center">
                <ul>
                    <li style="list-style-type: none; ">content</li>
                    <li style="list-style-type: none; ">content</li>
                    <li style="list-style-type: none; ">content</li>
                </ul>
            </div>
        </div>
    </body>
</html>

上記の例では、HTML container クラスが最初のステップとして作成されます。その中で、別のクラスは float_center と呼ばれます。両方のクラス内でフロートして中央に配置したいコンテンツまたは要素を追加できます。

.container{
   border: 1px solid red;
    float: left;
    position: relative;
    left: 40%;
}

その後、CSS プロパティを container クラスに追加する必要があります。上記の CSS コードは、float プロパティを配置し、値を left として設定して、コンテナークラスがコンテンツに応じて幅を変更するようにします。

要素の周りに border プロパティを追加できます。また、位置は相対的である必要があります。つまり、要素は通常の位置に対して相対的に配置されます。

left プロパティにより、通常の位置から移動します。

この例では、コンテンツが通常の位置の 40% シフトするように、left プロパティを 40% の値に設定しています。

CSS コードの結果として、上記の出力を取得できます。一目で、コンテナの左端の中央に配置されていることがわかります。

float 要素は既に中央に配置されていますが、成功させるには次の CSS コードを追加する必要があります。

.container{
  	float: left;
    position: relative;
    left: 50%;
}
.float_center{
    border: 1px solid red;
    text-align: center;
    background-color: bisque;
    padding-right: 20px;
    font-size: 25px;
    margin-top: 50px;
    float: left;
    position: relative;
    left:-50% ;
}

<!DOCTYPE html>
<html>
    <head>
        <title>html 3 column layout</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>

    <body>
      <h1>CSS float center</h1>
        <div class="container">
            <div class="float_center">
                <ul>
                    <li style="list-style-type: none; ">content</li>
                    <li style="list-style-type: none; ">content</li>
                    <li style="list-style-type: none; ">content</li>
                </ul>
            </div>
        </div>
    </body>
</html>

このコードでは、float_center クラスのスタイルを追加しました。 float プロパティを left 値に設定する必要があります。

位置は、親クラスに対して相対的でなければなりません。フローティング要素を中央に配置するには、left プロパティを -50% にする必要があります。

それ以外に、border、text-align、background-color、padding、font-size、margin プロパティなどのプロパティを使用して、フローティングコンテンツのスタイルを設定できます。これらのプロパティは、設計者のニーズを定義できます。

出力：

CSS フロートセンター - 出力 2

これは、上記の float-center の例の最終結果です。同様に、上記のコードを使用して、浮動要素を中央に調整できます。

CSS で浮動要素を中央に配置する方法 2

float-center メソッドの別の使用法を考えると、ページネーションを識別できます。これは、多くのページを持つ Web サイトに適用されていました。

ページネーションを作成するときは、float プロパティを使用して配置することがよくあります。 float プロパティを使用してページネーションをどのように中央に配置できるかが重要です。

これを解決するために、次の CSS プロパティと値を使用できます。

コード例:

<!DOCTYPE html>
<head>
    <title>Pagination</title>

    <meta  name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <h2 style="text-align: center;">Float center pagination</h2>
    <div class="center">
        <div class="pagination">
            <a href="#">&laquo;
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#">&raquo;</a>
        </div>
    </div>
</body

これは、center と pagination という 2つのクラスを持つ HTML コードです。この HTML コードでは、各ページのリンクを含む 5つの href 要素を設定します。

上記の結果を考慮すると、ページネーション要素がセンタリングまたはフロートされていないことがわかります。次の CSS コードを使用して、ページネーションを float と centered に設定できます。

.center{
    text-align: center;
}
 .pagination{
    display: inline-block;
    margin: 50px;
 }
.pagination a{
    color: black;
    float: left;
    padding: 9px 18px;
    text-decoration: none;
    border: 1px solid black;
    border-radius: 5px;
    background-color: #efeded;
    margin: 0 4px;
}
.pagination a:hover{
    background-color: #7d656f;
}

text-align プロパティを値 center に設定して、中央をページネーションにすることができます。通常、ページネーションは、float プロパティを使用して各要素の横に配置できます。

ご覧のとおり、上記のコードの pagination クラスはインラインブロックとして表示され、余白が 50 ピクセルに設定されています。

HTML コードのページネーションクラス内で、7つの href 要素を定義しました。 CSS コードでは、pagination a セレクターを作成して、これらの href 要素のスタイルを設定しました。

float プロパティは主に left 値に設定され、ページネーション要素を並べて配置します。

color プロパティは、ページネーション要素のフォントの色を定義しました。 padding プロパティは要素とその境界内にスペースを作成し、border-radius プロパティは境界の角を丸めます。

href 要素のスタイル設定に使用される background-color、margin、text-decoration、および border プロパティ。最後に、hover プロパティがページネーション要素に追加され、背景色が変更されます。

上記の CSS コードを使用して、次の float-center ページネーションヘルプを取得できます。

上記の 2つの方法を使用して、浮動要素を中央に配置できます。最初の方法は、浮動要素を所有するあらゆるシナリオに対応できます。

2つ目は、あらゆる種類のページネーションを作成できます。

浮動要素を中央に配置する別の方法

float プロパティを使用して 1 行のテキストを中央揃えにしないことを強くお勧めします。包含ブロックに text-align:center を適用します。

また、左右の余白を同様の値に設定するだけで、ブロックまたは要素を中央に配置できます。ブロックに明確な幅がある場合、左右の余白を auto 値に設定できます。

まとめ

この記事では、フローティングブロックまたは要素を CSS で中央揃えにする方法について説明します。浮動要素またはブロックに適用される 2つの方法について説明しました。

著者： Migel Hewage Nimesha

Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.

CSS を使用した浮動要素の中央揃え

CSS で浮動要素を中央に配置する方法 1

CSS で浮動要素を中央に配置する方法 2

浮動要素を中央に配置する別の方法

まとめ

関連記事 - CSS Alignment