6
A
答えて
9
http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/
はCSSでセンタリングすることを行うにはMicroTutで素晴らしい記事があります：jQueryを使ってセンタリング
.className{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}
は：
$(window).resize(function(){
$('.className').css({
position:'absolute',
left: ($(window).width() - $('.className').outerWidth())/2,
top: ($(window).height() - $('.className').outerHeight())/2
});
});
// To initially run the function:
$(window).resize();
そして、あなたはデモにhere
6
を見ることができますまた、この目的のためにCSSのdisplay: tableとdisplay: table-cellをハイジャックすることができます。 HTMLは次のようになります：
<body>
<div id="body">
<!-- Content goes here -->
</div>
</body>
とCSS：あなたにも水平方向のセンタリングをしたい場合は
html,
body {
width: 100%;
height: 100%;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
}
、これを追加します。
#body {
max-width: 1000px; /* Or whatever makes sense for you. */
margin: 0 auto;
}
いくつかのこの虐待を呼ぶだろうがCSSの：
- これはまったく同じですほとんどどこでも。
- 最小限のマークアップとスタイリングが必要です。
- CSSの垂直方向の調整は少し悪用する価値があります。垂直方向の整列は、ハッキング、歪み、絶対サイジングを必要としないはずです。
参考文献：
私はそれがあなたの役に立てば幸いhttp://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/ –
すばらしい記事... '.className {width：300px;高さ：200px;位置：絶対;左：50％;トップ：50％; margin：-100px 0 0 -150px; } '私のためにそれをしました。私はそれを受け入れることができるように私の質問への答えとしてこれを投稿できますか？ – Pieter