Question

我的网站存在问题我试图将我的页脚放在屏幕中央。我已经尝试使用text-align: center;作为我的页脚，但它不起作用，因为我应该希望页脚位于屏幕中间。文字说“Skriven i HTML”。

我想将页脚放在中心位置。

body {
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #EBEBEB;
  position: fixed;
  height: 100%;
  overflow: auto;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #F16529;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}

.container {
  margin-left: 25%;
  padding: 1px 16px;
  height: auto;
}

@media screen and (max-width: 480px) {
  ul {
    position: relative;
    width: 100%;
  }
  .container {
    margin: 0 auto;
    padding: 1px 16px;
  }
  div.item {
    width: initial;
    max-width: 256px;
  }
}

div.item {
  vertical-align: top;
  display: inline-block;
  text-align: center;
  max-width: 256px;
}

.blog {
  max-width: 100%;
  height: auto;
}

.caption {
  display: block;
}

img {
  display: block;
}

img.wrap {
  max-width: 70%;
  margin: 30px 0px;
}

img.align-right {
  float: right;
  margin-left: 30px;
}

div.article-container {
  padding: 5px;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

footer {
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #EBEBEB;
  text-align: center;
}

@media(max-width:767px) {
  img.align-right {
    float: none;
    margin: auto;
  }
  div.article-container {
    padding: 5px;
    text-align: center;
    max-width: 256px;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Inlämningsuppgift 6</title>
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <link href="style.css" rel="stylesheet">
</head>

<body>
  <!--nav bar-->
  <nav>
    <ul>
      <li style="list-style: none"><br></li>
      <li><img alt="htmll logo" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"></li>
      <li>
        <h2>Menu</h2>
      </li>
      <li>
        <a class="active" href="#lank">Länk 1</a>
      </li>
      <li>
        <a href="#lank2">Länk 2</a>
      </li>
      <li>
        <a href="#lank3">Länk 3</a>
      </li>
      <li>
        <a href="#lank4">Länk 4</a>
      </li>
    </ul>
  </nav>
  <!--navbar end-->
  <!--container for blog posts 3 images-->
  <div class="container">
    <h1>Innehåll</h1>
    <div class="item">
      <img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"> <span class="caption">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</span>
    </div>
    <div class="item">
      <img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"> <span class="caption">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</span>
    </div>
    <div class="item">
      <img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"> <span class="caption">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</span>
    </div>
  </div>
  <!--end-->
  <hr>
  <!--container for article -->
  <div class="container">
    <div class="article-container clearfix">
      <img alt="html logo" class="wrap align-right" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
        tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
        porttitor, facilisis luctus, metus</p>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
        tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
        porttitor, facilisis luctus, metus</p>
    </div>
  </div>
  <!--end-->
  <footer>
    Skriven i HTML 5.
  </footer>
</body>

</html>

Answer 1

这是对的。 footer位于body的中心位置。如果您希望它位于容器的中心，则需要在.container div中移动页脚。

<div class="container">
  <div class="article-container clearfix">
    <img alt="html logo" class="wrap align-right" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png">
    <p>Pellentesque habitant morbi t.......</p>
   </div>
   <footer>
      Skriven i HTML 5.
   </footer>
</div><!--end-->

Answer 2

正确，因为你的页脚元素在body标签中。

因为在CSS中你只使用container作为选择器，所以为页脚添加一个类属性contailer。然后，用于容器的所有CSS（对齐）也将应用于footer。

<footer class="container">
        Skriven i HTML 5.
</footer>

Answer 3

有几种可能的解决方案。即使现在页脚内容也处于中心位置。如果使用调试工具，可以看到。

你可以做的是首先在容器内移动页脚，这样你的HTML就像这样：

<!--nav bar-->
<nav>
    <ul>
        <li style="list-style: none"><br></li>
        <li><img alt="htmll logo" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"></li>
        <li>
            <h2>Menu</h2>
        </li>
        <li>
            <a class="active" href="#lank">Länk 1</a>
        </li>
        <li>
            <a href="#lank2">Länk 2</a>
        </li>
        <li>
            <a href="#lank3">Länk 3</a>
        </li>
        <li>
            <a href="#lank4">Länk 4</a>
        </li>
    </ul>
</nav><!--navbar end-->
<!--container for blog posts 3 images-->
<div class="container">
    <h1>Innehåll</h1>
    <div class="item">
        <img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"> <span class="caption">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</span>
    </div>
    <div class="item">
        <img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"> <span class="caption">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</span>
    </div>
    <div class="item">
        <img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"> <span class="caption">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</span>
    </div>
</div><!--end-->
<hr>
<!--container for article -->
<div class="container">
    <div class="article-container clearfix">
        <img alt="html logo" class="wrap align-right" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>
<footer>
    Skriven i HTML 5.
</footer>
</div><!--end-->

然后页脚内容将位于中心，但您会注意到左侧和右侧的边距。如果你想删除它，你可以这样做。在css中添加：

footer {
 margin:0 -16px;
}

其中-16px的边距是容器元素上的填充量。

此外，您可以尝试将容器类添加到页脚，它可以解决问题。

Answer 4

我会将页脚放在最后一个div（JSFiddle）中。

或者，我会使用它而不是页脚：

 <div style="position:relative;"> 
      <div style="position:absolute; margin:0 auto; padding:1rem;">
           Footer content
      </div>
 </div>

CSS获取页脚与内容相同的位置

4 个答案: