0

padding-bottom アプローチを使用して、比較的柔軟なレイアウト幅の柔軟な高さを作成しました。

今、ブロックのフローティングアイテム（FIDDLE http://jsfiddle.net/nZmr5/を参照）を垂直に中央に配置するのに本当に苦労しています。誰かがJavaScriptなしでそれを実現するアイデアを持っていますか?

ここに私の構造があります：

 <HTML>

<HEAD>
<TITLE>My new webpage</TITLE>
<style>
body, html {
    top:0;
    left:0;
    margin:0;
    background-color:green;
    width:100%;
    overflow:hidden;
}
.floating-item{
    padding-top:0;
    margin:0;
    top:0;
    left:0;
    width:100%;
    padding-bottom:0.1%;
    position:relative;
    background-color:red;
    border: 1px black solid;
}
.item{
background-color:white;
float:left;
width:20%;
padding-bottom:1%;
margin-left:4%;
margin-top:1%;
}


</style>


</HEAD>

<BODY>
<div class="floating-item">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</BODY>

</HTML>
4

2 に答える 2

1

コンテナーを垂直方向に揃える場合は、高さbodyを 100% に設定し.floating-item、margin-top:50%およびbottom:50%(またはtop:-50%) を指定する必要があります。このデモを参照してください: http://jsfiddle.net/nZmr5/3/embedded/result/

このメソッドは、コンテナーを本体に対して垂直方向に中央揃えにしますが、コンテナーの高さがその場で変化するため、ブラウザーのサイズを変更しても位置は更新されません。より信頼性の高い配置が必要な場合.floating-itemは、ページが読み込まれるたびに配置に満足しない限り、高さを固定する必要があります。

于 2013-03-19T12:45:27.190 に答える
-1

これはあなたが探しているものですか？

.floating-item{
    padding-top:0;
    margin:0;
    top:50%;
    left:0;
    width:100%;
    padding-bottom:0.1%;
    position:absolute;
    background-color:red;
    border: 1px black solid;
}
于 2013-03-19T11:58:08.583 に答える