文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在页面底部使用html和css保持页脚居中？

问如何在页面底部使用html和css保持页脚居中？
EN

Stack Overflow用户

提问于 2019-05-14 10:54:11

回答 3查看 1.3K关注 0票数 0

我的页脚不会居中或在页面底部。它要么在页面的一侧，要么在页面的中间，干扰了我的其他内容。

CSS：

footer {
  background-color: transparent;
  margin-top: -0.5em;
  padding: 2em;
  position: absolute; 
}

HTML：

<footer>
  &copy; Copyright 2019. All Rights Reserved.<br>
  <a href ="mailto:kaijumydude@gmail.com">KaijuMyDude@gmail.com</a>
</footer>

html

css

footer

回答 3

Stack Overflow用户

发布于 2019-05-14 11:02:57

footer {
  background-color: transparent;
  margin-top: -0.5em;
  padding: 2em;
  position: fixed; 
  left: 50%;
  transform:translateX(-50%);
  bottom: 0;

}


use `transfrom` and `left: 50%`

<footer>
  &copy; Copyright 2019. All Rights Reserved.<br>
  <a href ="mailto:kaijumydude@gmail.com">KaijuMyDude@gmail.com</a>
</footer>

票数 2

Stack Overflow用户

发布于 2019-05-14 11:06:01

一种解决方案是设置一个flexbox父对象，如body，并沿垂直轴对齐项目。在本例中，我添加了一个使用flex-grow: 1的main元素，它占用了父容器中最大的可用空间。父视图设置为min-height: 100vh，这意味着它至少与整个视口一样高。然后，footer消耗剩余的空间。如果main内容变得足够高，footer自然会被下推到页面上。

html,
body {
  margin: 0;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main,
footer {
  padding: 2em;
}

main {
  flex-grow: 1;
  background-color: salmon;
}

footer {
  background-color: transparent;
  text-align: center;
}

<main>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique debitis, repellat adipisci, id facere quia sequi dicta corrupti necessitatibus quibusdam non nihil tempora, ipsum, sint. Voluptate a harum illo, non.</p>
</main>
<footer>
  &copy; Copyright 2019. All Rights Reserved.<br>
  <a href="mailto:kaijumydude@gmail.com">KaijuMyDude@gmail.com</a>
</footer>

jsFiddle

票数 1

Stack Overflow用户

发布于 2019-05-14 13:36:44

footer {
  background-color: transparent;
  margin-top: -0.5em;
  padding: 2em;
  position: absolute; 
  text-align:center;
  width: 100%;
  }

<footer>
  &copy; Copyright 2019. All Rights Reserved.<br>
  <a href ="mailto:kaijumydude@gmail.com">KaijuMyDude@gmail.com</a>
</footer>

我希望这能帮助你作为一个解决方案。

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56122380

复制

相似问题

问如何在页面底部使用html和css保持页脚居中？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在页面底部使用html和css保持页脚居中？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在页面底部使用html和css保持页脚居中？
EN