Question

查看图片中的雨伞图片：

全尺寸窗口：。

精简（理想的展示位置）：

无论窗口大小如何，我都希望伞形图像位于屏幕中央。它从窗口缩小的角度开始工作，并且也可以在移动视图中工作。

我尝试了各种方法，但似乎不起作用，任何提示将不胜感激。

这是我的代码：

HTML

google-services.json

CSS

    <div class="wrapper">
<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 class="page3">
  <footer>
  <div class="umbrella_icon">
  <img src="umbrella-02.png">
  </div>


    <div class="logo_footer">Steve Roe</div>
      <div class="footer_menu">
  <ul class="ul_footer">
    <li><a href="work_with_me.html">Work With Me</a></li>
    <li>
<a href="xxxxxxxxxxxx.com">Contact</a></li>
  </ul>

  </div>
</footer>
</div>
</div>
</div>

Answer 1

将flex用于.wrap，如下所示：

.wrap{
   width:960px;
   margin:auto;
   margin-top: 100px;

   display: flex;
   justify-content: center;
}

此代码使图像水平居中。

Answer 2

使用dispaly:flex到.wrap

See working code

.page2{
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
  height: 100%;

}


.wrap{
    margin: auto;
    margin-top: 100px;
    display: flex;

}

.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;


}
.page3{

  margin: 20px;
  margin-top: 20px;
  height: 30%;
}

.umbrella_icon {

  text-align: center;

}

.footer {
  z-index: 1000;
  width: 960px;
  margin: 0 auto;

}

    <div class="wrapper">
<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 class="page3">
  <footer>
  <div class="umbrella_icon">
  <img src="umbrella-02.png" alt="umbrella">
  </div>


    <div class="logo_footer">Steve Roe</div>
      <div class="footer_menu">
  <ul class="ul_footer">
    <li><a href="work_with_me.html">Work With Me</a></li>
    <li>
<a href="xxxxxxxxxxxx.com">Contact</a></li>
  </ul>

  </div>
</footer>
</div>
</div>
</div>

Answer 3

结束从第2格开始的第2格开始。将page3 CSS更改为 .page3 {

保证金：50vh 50vw; }

  <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="page3">
      <footer>
      <div class="umbrella_icon">
      <img src="umbrella-02.png" alt="umbrella Here">
      </div>


        <div class="logo_footer">Steve Roe</div>
          <div class="footer_menu">
      <ul class="ul_footer">
        <li><a href="work_with_me.html">Work With Me</a></li>
        <li>
    <a href="xxxxxxxxxxxx.com">Contact</a></li>
      </ul>

      </div>
    </footer>
    </div>

调整窗口大小时，项目会四处移动

3 个答案: