Question

Won't Center，这是我的第一个独立项目。

在我的网站上，我有3张卡片可以在桌面视图中集中显示在屏幕上。在移动视图（Google Chrome开发工具）上，它们位于屏幕左侧。我想把它们居中。

 

   @media only screen and (max-width: 600px) {
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0px auto;
        padding: 0;
        overflow-x: hidden;
        position: relative;
      }
      .page2 {
   
      }
      .wrap {
    display: inline-block;
    flex-wrap: wrap;

    width: 100%;
    display: flex;
    justify-content: center;
      }
      .card {
        margin-right: 20px;
    width: 400px;
    margin-top: 18px;
    border-radius: 5px;
      }
    }


    /*desktop display code below*/

    .page2 {
      width: 100%;
      margin: 0 auto;
      margin-top: 20px;
      height: 100%;
    }

    .card {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
      transition: 0.4s;
      width: 300px;
      text-align: center;
      font-size: 16px;
      float: left;
      margin: 10px;
      text-decoration: none;
    }

    .wrap {
      width: 1000px;
      margin: auto;
      margin-top: 100px;
    }

    <div class="page2">
      <h2>Blog</h2>
      <div class="wrap">
        <div class="card">
          <a href="welcome.html">
            <img class="card-img" src="str3.jpg">
          </a>
          <div class="card-text">
            <h3><a href="welcome.html" id="card-link">Welcome</a></h3>
            <p>Website Launch and my First Project</p>
          </div>
        </div>
        <div class="card">
          <a href="blog.html">
            <img class="card-img" src="steve_roe_kyoto.jpg">
          </a>
          <div class="card-text">
            <h3><a href="blog.html" id="card-link"> Kyoto</a></h3>
            <p>My Recent Trip</p>
          </div>
        </div>
        <div class="card">
          <a href="best.html">
            <img class="card-img" src="str4.jpg">
          </a>
          <div class="card-text">
            <h3><a href="best.html" id="card-link">Best of 2018</a></h3>
            <p>Neon Goodness from Last Year</p>
          </div>
        </div>
      </div>
    </div>

  <div class="umbrella_icon">
  <img src="umbrella-02.png">
  </div>
  <div class="footer">
    <div class="logo_footer">Steve Roe</div>
      <div class="footer_menu">
  <ul class="footer_menu_1">
    <li><a href="work_with_me.html">Work With Me</a></li>
    <li>
<a href="mailto:xxxxxxxxxxx.com">Contact</a></li>
  </ul>

  </div>
  </div>



</body>
</html>

我尝试了许多不同的方法，但我无法弄清楚。

更新

Display flex已解决了该问题，并且内容现在集中显示。但这使我的页脚跳到了页面> image。

我上面的HTML已更新为包含页脚。我应该在CSS中包含什么？

Answer 1

我经验不足，对S.O.还是很陌生，但过去我也遇到过类似的问题。我不确定这是否行得通，但是由于这是HTML，这是我目前的强项之一，因此我将分享一些非常简单的内容。

我不太确定如何编写代码，因为我是新手，但是请使用以下标记：

<center>
  *Anything that goes in here will be center-aligned
</center>

是的，它被称为中心标签。

希望这会有所帮助：P

Answer 2

当屏幕较小时，所有内容都位于手机屏幕的中央，否则无法正常显示

在.cards类中，当屏幕很小 425px 并且居中对齐时，请使用弹性框。

Here is awesome guide on flexbox

.cards {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.card {
  width: 222px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  margin-left: 22px;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container {
  padding: 2px 16px;
}

@media screen and (max-width: 425px) {
  .cards {
  width: 100%;
  display: flex;
    justify-content: center;
  flex-wrap: wrap;
}
  .card {
    width: 300px;
    margin-top: 18px;
    border-radius: 5px;
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div class="page2">



<h2>Blog</h2>

    <div class="cards">
<div class="card">
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>John Doe</b></h4> 
    <p>Architect & Engineer</p> 
  </div>
</div>

    <div class="card">
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>John Doe</b></h4> 
    <p>Architect & Engineer</p> 
  </div>
</div>

    <div class="card">
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>John Doe</b></h4> 
    <p>Architect & Engineer</p> 
  </div>
</div>
    </div>
  
</body>
</html>

Answer 3

关闭媒体查询中的浮动。 Link to fiddle。

@media only screen and (max-width: 600px) {
  .card {
    float: none;
    margin: 0 auto;
  }
}

Answer 4

最好使用Bootstrap制作表格和div，使其看起来与在移动平板电脑的情况下相同。要了解有关Bootstrap的更多信息，请访问：https://www.w3schools.com/bootstrap/default.asp

无法将div内容置于移动视图的中心

4 个答案: