ホームページ > 記事 > ウェブフロントエンド > CSSレイアウトテクニックのまとめと共有
CSSレイアウトテクニックのまとめと共有
- 一个新手オリジナル
- 2017-09-06 09:36:171237ブラウズ
単一列レイアウト
水平方向中央揃え
親要素 text-align:center; 子要素: inline-block;
-
利点: 優れた互換性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>水平居中1</title> <style> .parent { width: 500px; height: 400px; background: red; text-align: center; } .child { display: inline-block; width: 300px; height: 100px; background: blue; } </style> </head> <body> <p class="parent"> <p class="child"></p> </p> </body> </html>E - サブフェクションマージン: 0 Auto;
利点: 優れた互換性
- 欠点: 幅を指定する必要がある
-
R
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>水平居中1</title> <style> .parent { width: 500px; height: 400px; background: red; } .child { width: 300px; height: 100px; background: blue; margin:0 auto; } </style> </head> <body> <p class="parent"> <p class="child"></p> </p> </body> </html>E 子要素 {display: table; margin: 0 auto;}
- 利点: 自分で設定するだけで済みます
- 欠点: IE6 と 7 は構造を調整する必要があります
親要素: 相対的; 子要素: left :50%;margin-left:-幅の半分
- 利点: 互換性が良い
欠点: 子要素の幅を知る必要がある
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
}
.child {
width: 300px;
height: 100px;
background: blue;
margin:0 auto;
display:table;margin:0 auto;s
}
</style>
</head>
<body>
<p class="parent">
<p class="child"></p>
</p>
</body>
</html>親要素: 相対、子要素: 左: 50%。変換:translate (-50%, 0); 利点: 互換性が低い
欠点: 子要素の幅を知る必要がない
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
position: relative;
top: 0;
left: 0;
}
.child {
width: 300px;
height: 100px;
background: blue;
position: absolute;
top: 0;
left: 50%;
margin-left: -150px;
}
</style>
</head>
<body>
<p class="parent">
<p class="child"></p>
</p>
</body>
</html>フレキシブルボックス: 親要素:表示: flex; justify-content: center;
長所: シンプル
-
短所: 互換性が低い
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>水平居中1</title> <style> .parent { width: 500px; height: 400px; background: red; position: relative; top: 0; left: 0; } .child { width: 300px; height: 100px; background: blue; position: absolute; top: 0; left: 50%; transform: translate(-50%,0); } </style> </head> <body> <p class="parent"> <p class="child"></p> </p> </body> </html>
- vertical-align: center;
-
れぇぇぇぇぇぇ
- 親要素:position:relative;子要素:position:absolute;top:50%;translate(0,-50%);
- 親要素:position:relative;絶対;top:50%;margin-top:-子要素の高さの半分;
- 親要素: display:flex;align-items:center;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
display: flex;
justify-content: center;
}
.child {
width: 300px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<p class="parent">
<p class="child"></p>
</p>
</body>
</html>- 水平方向と垂直方向の中央揃え
- 親要素: display:table-cell;vertical-align:middle;text-align:center;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>水平居中1</title> <style> .parent { width: 500px; height: 400px; background: red; display:table-cell; vertical-align:middle; } .child { width: 300px; height: 100px; background: blue; } </style> </head> <body> <p class="parent"> <p class="child"></p> </p> </body> </html>
- 子要素:position ：絶対
以上がCSSレイアウトテクニックのまとめと共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。