个人中心
gpt4 book ai didi

html - 页脚不是居中文本

转载 作者：太空宇宙 更新时间：2023-11-04 07:59:01 25 4
gpt4 key购买 nike

我的页脚不会使文本居中，而另一个具有相同类(在我的例子中称为“容器”)的 div 工作得很好。 As you can see the "Lorem Ipsum" works just fine while "Footer stuff" text is mostly on the right side of the box.我试过给它自己的类并尝试一些东西，比如把文本对齐放在左边，但它仍然处于中间的尴尬偏移。

这是我的代码:

Body {
    background-color: darkred;     
}
.header {
    text-align: center;
    width: 100%;
}
#navbar {
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
    background-color: darkblue;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}
#navbar li {
    float: left;
}
#navbar li a {
    display: block;
    padding: 8px 160px;
    font-weight: bold;
    color: white;
    border-right: 1px solid #ccc;
}
#navbar li a:hover {
    color: #c00;
    background-color: #fff;
}
.container {
    background-color: aqua;
    width: 100%;
    max-width: 1000px;
    margin-top: 50px;
    margin-bottom: auto;
    margin-right: auto;
    margin-left: auto;
    border: 5px solid #ccc;
    text-align: center;
    height: 100%; /* BE ADVISED! (????) */
}
#ipsumpic1 {
    width: 150px;
    float: right;
}
#ipsumpic2 {
    width: 100px;
    float: left;
}
#sidebarleft {
    margin: 0px auto;
    position: relative;
    left: 1000px;
    padding-top: 0px;
    width: 240px;
    float: left;
    border: 5px solid #ccc;
    background-color: aqua;
    margin-top: -350px;
}
#sidebarright {
    padding-top: 0px;
    width: 240px;
    float: right;
    border: 5px solid #ccc;
    background-color: aqua;
    margin-top: -537px;
    margin-right: 1100px;
}
<!DOCTYPE html>
<html>
	<head>
		<title>Prachtige website</title>
		<meta charset="utf-8">
        <link rel="Stylesheet"type="text/css" href="css/style.css">
        <script type=text/javascript src="script.js"></script>
	</head>
	<body>
        <header>
            <div class="header">
                <a href="index.html"><img src="img/logo.svg" width="200"></a>
            </div>
        </header>
            <ul id="navbar"> 
                <li><a href="index.html">Home</a></li>
                <li><a href="producten.html">Producten</a></li>
                <li><a href="diensten.html">Diensten</a></li>
                <li><a href="over.html">Over Ons</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        <div class="container">
            <main>
                <h1>Lorem Ipsum</h1>
                <img id="ipsumpic1" src="img/ipsum1.svg">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a pulvinar dolor, a rutrum tortor. Vestibulum auctor finibus odio id efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ullamcorper risus neque, sed vehicula augue finibus sed. Donec pretium ornare libero a venenatis. Donec sed ex id tellus posuere interdum. Nullam tincidunt egestas odio non gravida. Sed ut felis aliquet eros commodo elementum. Aliquam ullamcorper, diam quis aliquet tempor, magna nisi laoreet nisl, at vestibulum arcu enim quis elit. </p>
                <img id="ipsumpic2" src="img/ipsum2.svg">
                <p>Ut faucibus dui lectus, vitae pharetra magna maximus quis. Donec sollicitudin sem non ornare vulputate. Suspendisse pretium lacus nec gravida tristique. Sed sed nibh et eros facilisis accumsan. Nam mi elit, fermentum eu laoreet vel, venenatis sit amet leo. Curabitur erat arcu, dictum eu massa quis, hendrerit mattis turpis. Etiam ultrices quam dolor, a interdum erat eleifend eu. Cras sed blandit nunc. In dictum dignissim enim, vel gravida nisl sagittis pellentesque. Quisque fermentum pellentesque velit a faucibus. Nulla facilisi. In fermentum, mi id feugiat ultricies, nulla lorem elementum felis, et pretium velit mauris sit amet odio. Curabitur facilisis, mi in eleifend commodo, enim ex dignissim quam, ut pulvinar magna nisl et orci. Duis pulvinar imperdiet pretium. Nullam vehicula tortor in ex volutpat egestas. </p>
            </main>
            <div id="sidebarleft">
                <aside>
                    <h2>Nieuw nieuws!</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit leo, finibus sed risus eget, semper molestie lacus. Integer dictum laoreet erat a facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum luctus diam a est accumsan, eget maximus sem bibendum. Pellentesque efficitur tellus maximus elit egestas bibendum. Cras efficitur enim tortor, a fringilla lacus tristique quis. Pellentesque neque felis, faucibus nec nibh vel, dapibus congue lorem. Sed scelerisque ligula vitae convallis condimentum. Nulla a ante pulvinar, tristique turpis a, sagittis ipsum. Aliquam fringilla convallis justo, eu eleifend quam placerat ac. Fusce sit amet turpis id lacus consectetur sollicitudin. </p>
                </aside>
            </div>
            <div id="sidebarright">
                <aside>
                    <h2>Social media!</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit leo, finibus sed risus eget, semper molestie lacus. Integer dictum laoreet erat a facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum luctus diam a est accumsan, eget maximus sem bibendum. Pellentesque efficitur tellus maximus elit egestas bibendum. Cras efficitur enim tortor, a fringilla lacus tristique quis. Pellentesque neque felis, faucibus nec nibh vel, dapibus congue lorem. Sed scelerisque ligula vitae convallis condimentum. Nulla a ante pulvinar, tristique turpis a, sagittis ipsum. Aliquam fringilla convallis justo, eu eleifend quam placerat ac. Fusce sit amet turpis id lacus consectetur sollicitudin.</p>
                </aside>
            </div>
        </div>
        <footer>
            <div class="container">
                <h2>Footer stuff</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit faucibus libero quis lacinia. In in varius tortor. Donec nec finibus sapien. Curabitur tincidunt at quam vel commodo. In ut suscipit metus. In hac habitasse platea dictumst. Praesent dictum justo ut odio consectetur consectetur. </p>
            </div>
        </footer>
	</body>
</html>

请有人帮我解决这个问题，我不知道如何解决这个问题。
enter image description here

最佳答案

将 clear: both 添加到 .container 以清除 float 的:

body {
  background-color: darkred;     
}
.header {
  text-align: center;
  width: 100%;
}
#navbar {
  width: 100%;
  float: left;
  margin: 0 0 3em 0;
  padding: 0;
  list-style: none;
  background-color: darkblue;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
}
#navbar li {
  float: left;
}
#navbar li a {
  display: block;
  padding: 8px 160px;
  font-weight: bold;
  color: white;
  border-right: 1px solid #ccc;
}
#navbar li a:hover {
  color: #c00;
  background-color: #fff;
}
.container {
  background-color: aqua;
  width: 100%;
  max-width: 1000px;
  margin-top: 50px;
  margin-bottom: auto;
  margin-right: auto;
  margin-left: auto;
  border: 5px solid #ccc;
  text-align: center;
  height: 100%; /* BE ADVISED! (????) */
  clear: both; /* added */
}
#ipsumpic1 {
  width: 150px;
  float: right;
}
#ipsumpic2 {
  width: 100px;
  float: left;
}
#sidebarleft {
  margin: 0px auto;
  position: relative;
  left: 1000px;
  padding-top: 0px;
  width: 240px;
  float: left;
  border: 5px solid #ccc;
  background-color: aqua;
  margin-top: -350px;
}
#sidebarright {
  padding-top: 0px;
  width: 240px;
  float: right;
  border: 5px solid #ccc;
  background-color: aqua;
  margin-top: -537px;
  margin-right: 1100px;
}
<header>
  <div class="header">
    <a href="index.html"><img src="img/logo.svg" width="200"></a>
  </div>
</header>
<ul id="navbar"> 
  <li><a href="index.html">Home</a></li>
  <li><a href="producten.html">Producten</a></li>
  <li><a href="diensten.html">Diensten</a></li>
  <li><a href="over.html">Over Ons</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>
<div class="container">
  <main>
    <h1>Lorem Ipsum</h1>
    <img id="ipsumpic1" src="img/ipsum1.svg">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a pulvinar dolor, a rutrum tortor. Vestibulum auctor finibus odio id efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ullamcorper risus neque, sed vehicula augue finibus sed. Donec pretium ornare libero a venenatis. Donec sed ex id tellus posuere interdum. Nullam tincidunt egestas odio non gravida. Sed ut felis aliquet eros commodo elementum. Aliquam ullamcorper, diam quis aliquet tempor, magna nisi laoreet nisl, at vestibulum arcu enim quis elit.</p>
    <img id="ipsumpic2" src="img/ipsum2.svg">
    <p>Ut faucibus dui lectus, vitae pharetra magna maximus quis. Donec sollicitudin sem non ornare vulputate. Suspendisse pretium lacus nec gravida tristique. Sed sed nibh et eros facilisis accumsan. Nam mi elit, fermentum eu laoreet vel, venenatis sit amet leo. Curabitur erat arcu, dictum eu massa quis, hendrerit mattis turpis. Etiam ultrices quam dolor, a interdum erat eleifend eu. Cras sed blandit nunc. In dictum dignissim enim, vel gravida nisl sagittis pellentesque. Quisque fermentum pellentesque velit a faucibus. Nulla facilisi. In fermentum, mi id feugiat ultricies, nulla lorem elementum felis, et pretium velit mauris sit amet odio. Curabitur facilisis, mi in eleifend commodo, enim ex dignissim quam, ut pulvinar magna nisl et orci. Duis pulvinar imperdiet pretium. Nullam vehicula tortor in ex volutpat egestas.</p>
  </main>
  <div id="sidebarleft">
    <aside>
      <h2>Nieuw nieuws!</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit leo, finibus sed risus eget, semper molestie lacus. Integer dictum laoreet erat a facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum luctus diam a est accumsan, eget maximus sem bibendum. Pellentesque efficitur tellus maximus elit egestas bibendum. Cras efficitur enim tortor, a fringilla lacus tristique quis. Pellentesque neque felis, faucibus nec nibh vel, dapibus congue lorem. Sed scelerisque ligula vitae convallis condimentum. Nulla a ante pulvinar, tristique turpis a, sagittis ipsum. Aliquam fringilla convallis justo, eu eleifend quam placerat ac. Fusce sit amet turpis id lacus consectetur sollicitudin.</p>
    </aside>
  </div>
  <div id="sidebarright">
    <aside>
      <h2>Social media!</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit leo, finibus sed risus eget, semper molestie lacus. Integer dictum laoreet erat a facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum luctus diam a est accumsan, eget maximus sem bibendum. Pellentesque efficitur tellus maximus elit egestas bibendum. Cras efficitur enim tortor, a fringilla lacus tristique quis. Pellentesque neque felis, faucibus nec nibh vel, dapibus congue lorem. Sed scelerisque ligula vitae convallis condimentum. Nulla a ante pulvinar, tristique turpis a, sagittis ipsum. Aliquam fringilla convallis justo, eu eleifend quam placerat ac. Fusce sit amet turpis id lacus consectetur sollicitudin.</p>
    </aside>
  </div>
</div>
<footer>
  <div class="container">
    <h2>Footer stuff</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit faucibus libero quis lacinia. In in varius tortor. Donec nec finibus sapien. Curabitur tincidunt at quam vel commodo. In ut suscipit metus. In hac habitasse platea dictumst. Praesent dictum justo ut odio consectetur consectetur.</p>
  </div>
</footer>

关于html - 页脚不是居中文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47132840/

25 4 0
文章推荐： python - 如何在返回值中获取列表的一部分
文章推荐： java - 从 Tomcat 7 到 Weblogic 10.3.5 的 War 部署不起作用
文章推荐： python - 如何使用python pandas读取json文件？
文章推荐： c - C中具有自引用结构的内存体系结构
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com