好的,这就是父div:
#left {
width: 50%;
height: 100%;
background-color: #8FD1FE;
float: left;
opacity:0.75;
filter:alpha(opacity=75);
-webkit-transition: all .45s ease;
-moz-transition: all .45s ease;
transition: all .45s ease; }
这就是div中的div:
#reasons {
background-image:url('arrow1.png');
background-repeat: no-repeat;
height: 94px;
width: 400px;
margin: 0 auto 0 auto; }
我尝试了很多不同的方法,但我似乎无法保持第二个div居中并且坚持到第一个div的底部。
答案 0 :(得分:31)
首先,将外部div
设为父级布局:
#left {
/* ... */
position: relative; /* anything but static */
/* ... */
}
现在让我们将内部div
修复到底部:
#reasons {
/* ... */
position: absolute;
bottom: 0;
/* ... */
}
现在它固定在底部,但我们需要将其集中在一起:
#reasons {
/* ... */
left: 50%;
margin: 0 0 0 -200px; /* 200px is half of the width */
/* ... */
}
查看演示on JSFiddle。