Question

在桌面视口中，底部的页脚向右移动，但在较小的视口中则不向右移动。我的目标是将所有视口的中心对齐。我认为问题出在CSS文件中的页脚规则中，但我不确定。

我提供了屏幕截图，显示了代码在桌面视口和移动视口中的外观。

#container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

body {
  background-color: black;
  font-family: "times new roman", calibri, cursive;
  font-size: 1em;
  color: white;
}

.equip {
  float: left;
  padding-right: 0em;
  padding-top: 0em;
  margin-right: 3em;
  box-shadow: 1em 1em 2em powderblue;
}

h1 {
  padding-left: 30px;
  font-family: cursive, "times new roman";
}

h2 {
  margin-bottom: 130px;
  padding-left: 30px;
  font-family: "times new roman", cursive, calibri;
}

nav a {
  clear: both;
  margin-left: 100px;
  text-align: center;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  color: black;
  background-color: white;
  border-radius: 15px;
}

main {
  display: block;
  clear: both;
  margin-top: 100px;
  background-color: powderblue;
  margin-right: 100px;
  margin-left: 80px;
  border-radius: 30px;
  box-shadow: 5px 8px 10px white;
  max-width: 890px;
}

p {
  padding-top: 20px;
  margin-left: 100px;
  color: black;
  font-weight: bold;
}

ul li {
  color: black;
  list-style-type: none;
  margin-left: 130px;
}

footer {
  display: block;
  text-align: center;
  font-size: 0.8em;
}

<body>

  <div id="container">

    <p><img class="equip" src="images/Home Image1.jpg" alt="Durango Jewelry" width="260" height="195" title="Durango Jewelry"></p>

    <header>
      <h1>Durango Jewelry and Gem Shop</h1> <br>
      <h2>Distinguished wire-wrapped jewelry,pendants, and gems</h2>
    </header>

    <nav>
      <a href="Home.html">Home </a> &nbsp; &nbsp
      <a href="Classics.html">Classics </a> &nbsp; &nbsp
      <a href="Specials.html">Specials </a> &nbsp; &nbsp
      <a href="Gems.html">Gems</a> &nbsp; &nbsp
      <a href="Contact Me.html">Contact Me </a> &nbsp; &nbsp
    </nav>

    <main>
      <p>Durango Jewelry and Gem Shop pampers you with one-of-a-kind, high quality wire-wrapped pendants and gems. Our works of art are inspired by natural<br> geometries and the vast beauty of mother nature.<br></p>


      <p>The featured pendant provides these characteristics :<br><br>
        <ul>
          <li> <span style="color:red;">"Smoky Quartz"</span> gemstones, also called <span style="color:red;">"Soulmate Crystal"</span> </li>
          <li> gemstone is over 2 carats </li>
          <li> high quality silver alloy requires very little polishing </li>
        </ul><br>
      </p>

      <p>Come over to our store !</p>

    </main>

    <footer>
      <p style="color: white;font-size:0.8em;">Durango Jewelry Shop, <br> 101001 Main Street, <br> Durango CO |Established 1979 <br>
        <a style="color:powderblue" href="mailto:template.t@mailserver.com">Click Here to E-mail Us </a>
      </p>

    </footer>


  </div>

</body>

Desktop viewport

iPhone 4 viewport

Answer 1

通过删除margin-left：100px;在p标签的CSS中有效

     p  
      {
       padding-top: 20px;
       color: black;
       font-weight: bold;
      }

Answer 2

我看过您的代码，发现您的主要部分不在中央，而页脚已经在中央。由于您已在主要部分应用了一些左右限制，因此请放心使用，请用我建议的CSS替换您的CSS，这样您的问题就会解决。

建议的CSS

main {
    background-color: powderblue;
    border-radius: 30px;
    box-shadow: 5px 8px 10px white;
    max-width: 890px;
    margin: 0 auto;
    top: 20px;
    position: relative;
}

Answer 3

在<footer>内，您有一个<p>标签。在CSS中，您有p { margin-left: 100px }。

为什么页脚元素在桌面视口中向右对齐，而在较小的视口中却不对齐？

3 个答案: