CSS HTML页脚问题可以解决吗?

时间:2019-02-25 22:15:10

标签: html css footer

我在将页脚文字垂直居中(高度)时遇到了一些主要问题,并且我确实希望页脚更接近段落文字。这可能吗?enter image description here

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylefooter.css">
</head>
<body>

<div id="container">
<div id="main">
<p>ffsdergserkghretkguhsritg</p></br>
</div>
</div>

<footer id="footer">
<p>Ohhhh yeah!</p>
</footer>

</body>
</html>
  • {
        边距:0;
        填充:0;

    html,正文{
        高度:100%;
    }

    容器{

    min-height: 100%;
    

    }

    主要{

    overflow: auto;             
    padding-bottom: 40px;       
    

    }

    页脚{

    background-color: black;
    position: relative;
    height: 40px;               
    clear: both;
    text-align: center;
    color: white;
    

    }

1 个答案:

答案 0 :(得分:0)

您可以在css中使用属性“ line-height”,并将页脚的高度作为值

footer 
{
    height : 40px;
}

footer > p 
{
    line-height: 40px;
}

更多信息: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height