CSS中,我们可以通过各种方法让两个浮动的元素上下居中。其中一个比较流行的做法是使用相对定位和负边距的组合,下面是一段实现这个效果的CSS代码: #container { position: rela
CSS中,我们可以通过各种方法让两个浮动的
#container { position: relative; height: 100%; } #box1, #box2 { position: absolute; top: 50%; } #box1 { margin-top: -25px; /* box1的高度 */ } #box2 { margin-top: 25px; /* box2的上外边距 */ }
上述代码中,我们首先给父元素#container一个相对定位,这样绝对定位的子元素会以其为相对参照物。然后,我们给两个浮动的子元素#box1和#box2一个相同的定位: top: 50%。这样,它们就被移动到了父元素的中间位置。
接下来,我们需要用负边距手动微调下#box1和#box2的位置。对于#box1,我们需要把它向上移动25像素(即其高度的一半),所以我们设置其上外边距为-25px。对于#box2,我们需要把它向下移动25像素,所以我们设置其上外边距为25px。
最后,我们可以给#box1和#box2设置一个相同的宽度和高度,以获得更一致的外观效果。
粉丝
0
关注
0
收藏
0