HTML は要素を水平方向と垂直方向に中央揃えにします-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML は要素を水平方向と垂直方向に中央揃えにします

高洛峰

Feb 27, 2017 am 10:43 AM

ページをデザインするとき、ログインウィンドウを中央に配置するなど、p を中央に配置し、ページウィンドウに対して水平方向および垂直方向に表示する必要があることがよくあります。

これまでに、多くの方法が検討されてきました。

HTML:

<body>
    <p class="maxbox">
        <p class="minbox align-center"></p>
    </p>
</body>

ログイン後にコピー

Renderings (以下のメソッドは同じレンダリングになります):

HTML は要素を水平方向と垂直方向に中央揃えにします

最初のタイプ: CSS 絶対配置

主に絶対配置を使用し、マージンを使用して中間位置に調整します。

親要素:

.maxbox{   
    position: relative;   
    width: 500px;   
    height: 500px;   
    margin: 5px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

ログイン後にコピー

子要素:

.minbox{   
    width: 200px;   
    height: 200px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

ログイン後にコピー

水平垂直中央揃え:

.align-center{   
    position: absolute;   
    left: 50%;   
    top: 50%;   
    margin-left: -100px;   /*width/-2*/
    margin-top: -100px;    /*height/-2*/
}

ログイン後にコピー

2番目のタイプ: CSS絶対配置 + Javascript/JQuery

主に絶対配置を使用し、その後に使用しますJavascript /JQuery は中間位置に調整されます。この方法は最初の方法に比べてクラスの柔軟性が向上します。

親要素:

.maxbox{   
    position: relative;   
    width: 500px;   
    height: 500px;   
    margin: 5px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

ログイン後にコピー

子要素:

.minbox{   
    width: 200px;   
    height: 200px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

ログイン後にコピー

水平垂直中央揃え:

.align-center{   
    position: absolute;   
    left: 50%;   
    top: 50%;   
}

ログイン後にコピー

JQuery:

$(function(){   
    $(".align-center").css(   
        {   
            "margin-left": ($(".align-center").width()/-2),   
            "margin-top": ($(".align-center").height()/-2)   
        }   
    );   
});

ログイン後にコピー

3番目のタイプ: CSS3絶対配置+ディスプレイスメント

絶対を使用CSS3での位置決め変換: 変換でも同じ効果を得ることができます。

親要素:

.maxbox{   
    position: relative;   
    width: 500px;   
    height: 500px;   
    margin: 5px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

ログイン後にコピー

子要素:

.minbox{   
    width: 200px;   
    height: 200px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

ログイン後にコピー

水平方向と垂直方向の中心揃え:

.align-center{   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    -webkit-transform: translate(-50%, -50%);   
       -moz-transform: translate(-50%, -50%);   
            transform: translate(-50%, -50%);        /*向左向上位移*/
}

ログイン後にコピー

4番目の方法: フレックスボックス: [伸縮レイアウトボックスモデル]

Flexbox モデル言うのは簡単すぎます。

ここで HTML を変更する必要があります:

<p class="maxbox align-center">
    <p class="minbox"></p>
</p>

ログイン後にコピー

親要素:

.maxbox{   
    position: relative;   
    width: 500px;   
    height: 500px;   
    margin: 5px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

ログイン後にコピー

子要素:

.minbox{   
    width: 200px;   
    height: 200px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

ログイン後にコピー

水平方向と垂直方向の中央揃え:

.align-center{   
    display: flex;   
    display: -webkit-flex;       /*兼容问题*/
    justify-content: center;   
    align-items: center;    
}

ログイン後にコピー

いくつかの方法の比較:

最初の CSS 絶対位置マージン調整は互換性は良好ですが、柔軟性に欠けます。水平方向と垂直方向の中央揃えが必要なボックスが多数ある場合は、幅と高さが異なるため、異なる .align-center を記述する必要があります。

2 つ目はスクリプト言語を使用しており、互換性が高く、1 つ目の欠点を補っています。水平方向と垂直方向のセンタリングの効果は、幅と高さの変更には影響されません。
3 番目のものは CSS3 のいくつかの新しいプロパティを使用しており、IE10、Chrome、Firefox、Opera と互換性があります。互換性はあまり良くなく、横方向と縦方向のセンタリング効果は幅と高さを変更しても影響を受けません。
Firefox、Opera、Chromeと互換性のあるFlexboxモデルを使用すると、IEは完全に一掃されます。また、幅と高さの変化による水平方向と垂直方向のセンタリング効果には影響しません。

以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです。

要素の水平方向および垂直方向の中央揃えに関する HTML 関連の記事をさらに詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7700

Java チュートリアル

1640

CakePHP チュートリアル

1393

Laravel チュートリアル

1287

PHP チュートリアル

1230

Related knowledge

HTMLは初心者のために簡単に学ぶことができますか？ Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLでの開始タグの例は何ですか？ Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。