HTML_HTML/Xhtml_Webpage 制作における要素の水平方向および垂直方向のセンタリングに関するディスカッション-htmlチュートリアル-php.cn

HTML_HTML/Xhtml_Webpage 制作における要素の水平方向および垂直方向のセンタリングに関するディスカッション

WBOY

リリース： 2016-05-16 16:36:04

オリジナル

2088 人が閲覧しました

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

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

HTML:

XML/HTML コードコンテンツをクリップボードにコピー

<ボディ>
<div class="maxbox" >
<div class="minbox align -center">div>
div>
ボディ>

レンダリング (次のメソッドは同じレンダリングを持ちます):

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

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

親要素:

CSS コードコンテンツをクリップボードにコピーします

.maxbox{
位置: 相対;
幅: 500px;
: 500px; マージン
5px; ボックスシャドウ: 1px
1px rgba (0, 0, 0, 0.8)、-1px -1px 1px rgba(0, 0, 0, 0.8); }
子要素:
CSS コード

.minbox{

: 200px
高さ: 200px;
1px 1px 1px
1px -1px 1px rgba(0, 0, 0, 0.8); }
水平方向と垂直方向の中央揃え:
CSS コードコンテンツをクリップボードにコピーします
1. .align-center{
2. 位置: 絶対;
3. 左: 50%;
4. トップ: 50%;
5. : -100px; /*width/-2* /
6. : -100px; /*高さ/-2* / }
2 番目のタイプ: CSS 絶対配置 Javascript/JQuery
主に絶対位置を使用し、その後 Javascript/JQuery を使用して中間位置に調整します。この方法は最初の方法に比べてクラスの柔軟性が向上します。親要素:

CSS コード
コンテンツをクリップボードにコピーします
.maxbox{
2. : 相対; 幅
3. 500px; 高さ:
4. ; マージン: 5px
5. ボックスシャドウ: 1px 1px
6. rgba (0, 0, 0, 0.8)、-1px -1px 1px rgba(0, 0, 0, 0.8); } 子要素:
7. CSS コード
.minbox{
幅
:
1. ;
2. : 200px; ボックスシャドウ: 1px
3. 1px 1px rgba (0, 0, 0, 0.8)、-1px
4. 1px 1px rgba(0, 0, 0, 0.8); } 水平方向と垂直方向の中央揃え: CSS コードコンテンツをクリップボードにコピーします
  .align-center{
  
  位置: 絶対;
  
  左: 50%;
  
  トップ: 50%; }
  
  JQuery:
JavaScript コード
コンテンツをクリップボードにコピーします
$(
1. 関数(){ $(
2. ).css(
3. "margin-left"
4. ".align-center").width() /-2)、 "margin-top"
5. ".align-center").height() /-2) );
6. });
9. 3 番目のタイプ: CSS3 絶対位置変位
親要素:
CSS コード

コンテンツをクリップボードにコピーします
.maxbox{
1. 位置:
2. ; 幅: 500px
3. 高さ: 500px;
4. マージン: 5px; ボックスシャドウ:
5. 1px 1px rgba (0, 0, 0, 0.8)、-
6. -1px 1px rgba(0, 0, 0, 0.8); } 子要素: CSS コード
7. .minbox{
  
  幅: 200px;
  
  高さ: 200px; ボックスシャドウ:
  1px
  1px 1px rgba (0, 0, 0, 0.8)、-1px -1px 1px rgba(0, 0, 0, 0.8); }
  
  水平方向と垂直方向の中央揃え:
  
  CSS コード
コンテンツをクリップボードにコピーします
.align-
center

{ 位置
:
絶対; トップ: 50%;

左: 50%;
-webkit-transform: 変換(-50%, -50%);
-moz-transform:translate(-50%, -50%); 変換:translate(-50%, -50%);
/*左と上にシフト*/

}

4 番目のタイプ: フレックスボックス: [伸縮式レイアウトボックスモデル]
Flexbox モデルを使用すると、要素を水平および垂直にするのが非常に簡単です。
ここで HTML を変更する必要があります:
XML/HTML コード
コンテンツをクリップボードにコピー

<
div class
=
"maxbox align-center" > <div class
=
"minbox" >div> div>
親要素:
CSS コード
コンテンツをクリップボードにコピーします

.maxbox{

位置: 相対;

幅: 500px;
高さ
: 500px; マージン
:
5px; ボックスシャドウ: 1px
1px
1px rgba (0, 0, 0, 0.8)、-1px -1px 1px rgba(0, 0, 0, 0.8); }

子要素:

C# コード
コンテンツをクリップボードにコピーします
.minbox{
幅: 200px;

高さ: 200px; ボックスシャドウ: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}

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

CSS コード
コンテンツをクリップボードにコピーします
.align-
center
{

表示
: display
: -webkit-flex;
-
コンテンツ
: 中央; > 項目の配置: 中心

; } いくつかの方法の比較: 最初の CSS 絶対位置マージン調整は互換性は良いですが、柔軟性に欠けます。水平方向と垂直方向の中央に配置する必要があるボックスが多数ある場合は、幅と高さが異なるため、異なる .align-center を記述する必要があります。 2 番目はスクリプト言語を使用しており、互換性が高く、1 番目の欠点を補っています。水平方向と垂直方向のセンタリングの効果は、幅と高さの変更には影響されません。 3 番目のタイプは CSS3 のいくつかの新しいプロパティを使用し、IE10、Chrome、Firefox、Opera と互換性があります。互換性はあまり良くなく、横方向と縦方向のセンタリング効果は幅と高さを変更しても影響を受けません。 Firefox、Opera、Chrome と互換性のある Flexbox モデルを使用すると、IE は完全に排除されます。また、幅と高さの変化による水平方向と垂直方向のセンタリング効果には影響しません。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。