HTML要素の水平方向と垂直方向の中央揃えを設定する方法-htmlチュートリアル-php.cn

HTML要素の水平方向と垂直方向の中央揃えを設定する方法

php中世界最好的语言

リリース： 2018-01-24 10:01:44

オリジナル

4779 人が閲覧しました

今回は、html要素の水平方向と垂直方向の中央揃えを設定する方法を説明します。 HTML要素を水平方向と垂直方向の中央揃えに設定するときの注意点とは何ですか。実際のケースを見てみましょう。

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

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

HTML:

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

ログイン後にコピー

最初のタイプ: 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)   
        }   
    );   
});

ログイン後にコピー

いくつかの方法の比較:

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

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

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

HTMLとCSSでダバイを作る方法

XHTMLでよく使われるタグとは何ですか

HTML/XHTMLでimg画像タグを使う方法

以上がHTML要素の水平方向と垂直方向の中央揃えを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。