モバイルビューでdivコンテンツを中央に配置できません

debugcn 投稿 Dev

スティーブ・ロー

Wo n'tCenterこれは私の最初の独立したプロジェクトです。

私のウェブサイトには、デスクトップビューで中央にインラインで表示される3枚のカードがあります。モバイルビュー（Google Chrome Dev Tools）では、画面の左側に配置されます。それらを中央に配置したいと思います。

 

   @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が問題を分類し、コンテンツが中央に表示されるようになりました。しかし、それは私のフッターがページ>画像にジャンプする原因になりました。

上記の私のHTMLは、フッターを含むように更新されました。CSSには何を含める必要がありますか？

Bhautik Chudasama

画面が小さい場合、すべてがモバイル画面の中央に表示されます。それ以外の場合は、通常どおり表示されます。

画面が小さい場合.cardsクラスのフレキシボックスを使用425pxその中心に並びます。

これが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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]