ホームページ > 記事 > ウェブフロントエンド > HTML要素の水平方向と垂直方向の中央揃えを設定する方法
HTML要素の水平方向と垂直方向の中央揃えを設定する方法
- php中世界最好的语言オリジナル
- 2018-01-24 10:01:444720ブラウズ
今回は、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 と互換性があります。互換性はあまり良くなく、横方向と縦方向のセンタリング効果は幅と高さを変更しても影響を受けません。
以上がHTML要素の水平方向と垂直方向の中央揃えを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。