时间戳

首页 > 解决方案 > 未对齐的块对象

html - 未对齐的块对象

问题描述

在我的页脚中，我有一个要居中的 div，但它却漂浮在页脚的顶部。https://codepen.io/k1n64r7hur/pen/MWvaGrP

footer {
text-align: center;
background-color: grey;
position: fixed;
bottom: 0;
width: 100%;
height: 1.5em;
display: block;
transition: bottom 0.3s;}   
.test {
float: none;
background-color: blueviolet;
position: absolute;
display: inline-block;
height: 1.5em;
width: 90%;
padding: 0;
bottom: 50%;
left: 50%;
transform: translate(-50%, -50%);}

标签： htmlcss

解决方案

页脚的高度需要增加。translate 的用法是将块向上拉。


footer {
    //text-align: center;
    background-color: grey;
    position: fixed;
    //bottom: 0;
    width: 100%;
    height: 3em;
    //display: block;
    transition: bottom 0.3s;
}   

.test {
    text-align:center;
    //float: none;
    background-color: blueviolet;
    //position: absolute;
    //display: inline-block;
    height: 3em;
    width: 90%;
    padding: 5px 5%;
    //bottom: 50%;
    left: 50%;
    //transform: translate(-50%, -50%);
}

document.getElementById("footbar").style.bottom = "-3rem";

推荐阅读