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-itemamargin-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 回答