CSSでの水平/垂直中心の問題について
7039 ワード
cssにおける水平・垂直中央問題については、皆さんもよくあると思いますが、これも実用性の高い使い方だと思いますが、いったいどのような方法があるのでしょうか.ここで編集者は小さなまとめをして、何か足りないところがあったら、もっと指摘してください.の
一、横方向中央:
1.margin: 0 auto;
これは多くの人が使用しており、最もよく使われ、最も効果的な方法であり、多くの主流ブラウザでは、Windowsプラットフォーム上のIE 6であっても、標準互換モード(compliancemode)で正常に表示されます.(例えば次のクラスセレクタ[container]の中央に、1と2は同じ効果です)
2.text-align:center;
この方法は、ほとんどのブラウザと互換性があり、body要素に設定できるため、テキスト要素の中心にある問題を処理するのにかなりhackです(text-alignには、left|center|rightの3つの属性値があります.それぞれ左揃え、中央揃え、右揃えに対応します).
しかし、bodyがtext-alignを設定すると、bodyのすべての子孫要素が中央になるので、text-align:leftを設定してテキストをデフォルトの左揃えに戻すことができます.
3.
html 4で淘汰されたcenterラベルについては、同じように中央揃えができますが、使用は推奨されません.
4.position;
位置決めが中央にできることについては、みんなが知っていると信じていますが、それは知能的ではありません.私たちが簡単に計算してから、bodyの幅が100%で、divブロックの幅がaで、leftの値は(1-a)/2になります.
5.margin/padding;
いくつかの小さなdivブロックの中の中心の問題に対して、私たちはmarginとpaddingを調整してみることができます.これは実は小さなテクニックです.もしあなたが適切に運用すれば、あなたは意外に発見することができます.かなり使いやすくて、あなたは試してみる価値があります!!!
6.比較的に囧の方法(1つのdivブロックが押し寄せる);
ほほほ、この方法は比较的に弱い知恵を推定して、しかしやはり効果を达成することができて、邓おじいさんは言ったのではありませんか:“白猫の黒猫に関わらず、ネズミを捕まえることができるのは良い猫です”、同様にあなたが东拼西凑に関わらず、やはりどのようにして、予想の効果を达成することができてok!(例えばdiv 2バーdiv 1が押し寄せる)
7.css 3が提供する弾性ボックスモデル;
弾性ボックスモデルはcss 3が新たに導入したボックスモデルとして、適応ブラウザウィンドウのフローレイアウトや適応フォントサイズの弾性レイアウトを簡単に作成することができ、その実現原理は以下のコードで初歩的に認識することができ、弾性ボックスモデルをトリガーするにはdisplay:boxを適用することができる.「box-orient」では、分布の座標軸を定義します.vertical(垂直分布)とhorizional(水平分布)です.デフォルトでは、ボックスには弾力性はありません.box-flexのプロパティ値が少なくとも1の場合、弾力性があります.箱に弾力性がない場合は、できるだけ広く内容が表示され、オーバーフローがなく、その大きさは「width」と「height」によって決定されます(またはmin-height、min-width、max-width、max-height).
8.負の外側余白(margin-left:-(width/2)px);
負の外側余白は中央に位置する問題を解決することができるが、絶対位置決め(position:absolute;)を使用するには、この方法は第一選択の方法ではありませんが、良い解決策であり、多くのブラウザの互換性の問題を解決するために適用性が非常に広いです.
9.css 3のfit-content;
fit-contentはCSS 3でwidth属性に新たに追加された属性値で、marginと合わせて水平中央の効果を簡単に実現できます.
10.css 3のflex;
CSS 3のflexは強力な機能であり、レイアウトをより柔軟で便利にすることができ、実現が非常に便利で、拡張性が強く、唯一の欠点は現在のブラウザの互換性が悪いことです.
二、垂直中央:
1.line-height(行高);
垂直中心に対して、line-heightはみんなの最新の熟知した方法で、最も便利で、速い方法で、同時にまたとても良いブラウザの互換性の問題をやり遂げることができます
2.位置付け
positionは私たちにとって、それはかなり使いやすくて、位置決めを使ってもちろん垂直に中央に位置することができます.
3.margin/padding;
margin-top/padding-topを設定して垂直劇の中央の効果を達成することができます.divの高さを考慮しないでください.
4.vertical-align: middle;
vertical-alignプロパティは、行内の要素のベースラインがその要素の行のベースラインに対して垂直に整列することを定義します.負の長さの値とパーセンテージ値を指定できます.これにより、要素は上昇ではなく減少します.表のセルでは、セル・ボックスのセルの内容の位置合わせが設定されます.
一、横方向中央:
1.margin: 0 auto;
これは多くの人が使用しており、最もよく使われ、最も効果的な方法であり、多くの主流ブラウザでは、Windowsプラットフォーム上のIE 6であっても、標準互換モード(compliancemode)で正常に表示されます.(例えば次のクラスセレクタ[container]の中央に、1と2は同じ効果です)
/*1*/
.container{margin: 0 auto;}
/*2*/
.container{margin-left: auto;margin-right: auto;}2.text-align:center;
この方法は、ほとんどのブラウザと互換性があり、body要素に設定できるため、テキスト要素の中心にある問題を処理するのにかなりhackです(text-alignには、left|center|rightの3つの属性値があります.それぞれ左揃え、中央揃え、右揃えに対応します).
body{text-align: center;}しかし、bodyがtext-alignを設定すると、bodyのすべての子孫要素が中央になるので、text-align:leftを設定してテキストをデフォルトの左揃えに戻すことができます.
p{text-align: left;}3.
html 4で淘汰されたcenterラベルについては、同じように中央揃えができますが、使用は推奨されません.
<center></center>4.position;
位置決めが中央にできることについては、みんなが知っていると信じていますが、それは知能的ではありません.私たちが簡単に計算してから、bodyの幅が100%で、divブロックの幅がaで、leftの値は(1-a)/2になります.
body{background: #000;position: relative;}
div{background-color:#cf9;position: absolute;width: 40%;height: 90px;left: 30%}5.margin/padding;
いくつかの小さなdivブロックの中の中心の問題に対して、私たちはmarginとpaddingを調整してみることができます.これは実は小さなテクニックです.もしあなたが適切に運用すれば、あなたは意外に発見することができます.かなり使いやすくて、あなたは試してみる価値があります!!!
6.比較的に囧の方法(1つのdivブロックが押し寄せる);
ほほほ、この方法は比较的に弱い知恵を推定して、しかしやはり効果を达成することができて、邓おじいさんは言ったのではありませんか:“白猫の黒猫に関わらず、ネズミを捕まえることができるのは良い猫です”、同様にあなたが东拼西凑に関わらず、やはりどのようにして、予想の効果を达成することができてok!(例えばdiv 2バーdiv 1が押し寄せる)
div2{width: 30%;float: left;}
div1{width: 40%;float: left;}7.css 3が提供する弾性ボックスモデル;
弾性ボックスモデルはcss 3が新たに導入したボックスモデルとして、適応ブラウザウィンドウのフローレイアウトや適応フォントサイズの弾性レイアウトを簡単に作成することができ、その実現原理は以下のコードで初歩的に認識することができ、弾性ボックスモデルをトリガーするにはdisplay:boxを適用することができる.「box-orient」では、分布の座標軸を定義します.vertical(垂直分布)とhorizional(水平分布)です.デフォルトでは、ボックスには弾力性はありません.box-flexのプロパティ値が少なくとも1の場合、弾力性があります.箱に弾力性がない場合は、できるだけ広く内容が表示され、オーバーフローがなく、その大きさは「width」と「height」によって決定されます(またはmin-height、min-width、max-width、max-height).
<style type="text/css">
body{
display: box;
box-orient: horizontal;
}
#box1 {
box-flex: 2;
}
#box2 {
box-flex: 1;
}
#box3 {
box-flex: 1;
}
</style>
<body>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</body>8.負の外側余白(margin-left:-(width/2)px);
負の外側余白は中央に位置する問題を解決することができるが、絶対位置決め(position:absolute;)を使用するには、この方法は第一選択の方法ではありませんが、良い解決策であり、多くのブラウザの互換性の問題を解決するために適用性が非常に広いです.
.container{backgrond-color: #000;position: absolute;left: 50%;width: 1000px;margin-left: -500px;}9.css 3のfit-content;
fit-contentはCSS 3でwidth属性に新たに追加された属性値で、marginと合わせて水平中央の効果を簡単に実現できます.
<style type="text/css">
.page ul {
width: -moz-fit-content;width:-webkit-fit-content;width: fit-content;margin-left: auto;
margin-right: auto;
}
.page li {
line-height: 25px;margin: 0 5px;float: left;
}
.page a {
display: block;color: #f2f2f2;text-shadow: 1px 0 0 #101011;padding: 0 10px;border-radius: 2px;
box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
background: linear-gradient(top,#434345,#2f3032);
}
.page a:hover {
text-decoration: none; box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradient(top,#f48b03,#c87100);
}
</style>
<div class="page">
<ul>
<li><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>10.css 3のflex;
CSS 3のflexは強力な機能であり、レイアウトをより柔軟で便利にすることができ、実現が非常に便利で、拡張性が強く、唯一の欠点は現在のブラウザの互換性が悪いことです.
<style type="text/css">
.page {
display: -webkit-box;
-webkit-box-orient: horizontal;-webkit-box-pack: center;display: -moz-box;
-moz-box-orient: horizontal;-moz-box-pack: center; display: -o-box;-o-box-orient: horizontal;
-o-box-pack: center;display: -ms-box;-ms-box-orient: horizontal;-ms-box-pack: center;
display: box;box-orient: horizontal;box-pack: center;
}
.page li {
line-height: 25px;margin: 0 5px;float: left;
}
.page a {
display: block;color: #f2f2f2;text-shadow: 1px 0 0 #101011; padding: 0 10px;border-radius: 2px;
box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;background: linear-gradient(top,#434345,#2f3032);
}
.page a:hover {
text-decoration: none;box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradient(top,#f48b03,#c87100);
}
</style>
<div class="page">
<ul>
<li><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>二、垂直中央:
1.line-height(行高);
垂直中心に対して、line-heightはみんなの最新の熟知した方法で、最も便利で、速い方法で、同時にまたとても良いブラウザの互換性の問題をやり遂げることができます
<style type="text/css">
.page{width: 100%;height: 100px;background: #000;line-height: 100px;}
</style>
<div class="page">
<span>hello line-height!</span>
</div>2.位置付け
positionは私たちにとって、それはかなり使いやすくて、位置決めを使ってもちろん垂直に中央に位置することができます.
.div{position: absolute;top: 50%}3.margin/padding;
margin-top/padding-topを設定して垂直劇の中央の効果を達成することができます.divの高さを考慮しないでください.
.div{width: 100px;height: 40%;background-color: red;margin-top:30%}4.vertical-align: middle;
vertical-alignプロパティは、行内の要素のベースラインがその要素の行のベースラインに対して垂直に整列することを定義します.負の長さの値とパーセンテージ値を指定できます.これにより、要素は上昇ではなく減少します.表のセルでは、セル・ボックスのセルの内容の位置合わせが設定されます.
<div id="wrapper">
<div id="cell">
<div class="content">
Content goes here
</div>
</div>
</div>
#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}