我的数字不会集中在我的div

时间：2017-10-24 08:50:28

标签： html image center

对于一个学校项目，我需要建立一个网站，这是我们项目的一部分（制作一个洗牌和交易卡片的乐高机器人）。在我网站的商品部分，我的数字排成一排，但它们不知道中心（在商品标签上看到http://i385436.hera.fhict.nl/theshufflr/index.html），我尝试了一切。

这些应该居中：

enter image description here

有人可以帮我解决这个问题吗？以下是与商品标签配合使用的代码部分：

＆＃13;
＆＃13; 
.et-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
  background: black;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}

.introback {
  position: relative;
  height: 100vh;
  width: 100%;
}

.introback img {
  text-align: center;
  position: relative;
  z-index: 0;
  width: 100%;
}

.introoverlay {
  position: absolute;
  top: 20vh;
  left: 30%;
  height: 100% width: 60%;
  color: white;
  z-index: 1;
  text-align: center;
  vertical-align: center;
  padding: 0;
  margin: 0;
}

.merchoverlay {
  position: absolute;
  top: 10vh;
  left: 30%;
  height: 100% width: 60%;
  color: white;
  z-index: 1;
  text-align: center;
  vertical-align: center;
  padding: 0;
  margin: 0;
}

.et-slide-merch {
  display: flex;
  height: 40vh;
  text-align: center;
  padding: 0;
  left: 30%;
  width: 100%;
}

.et-slide-merch figure {
  display: inline-block;
  margin: 20px;
}

.et-slide-merch figure img {
  display: inline-block;
  vertical-align: top;
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

.et-slide-merch figure figcaption {
  border: 0px;
  text-align: center;
  color: white;
}

.et-slide-merch figure figcaption h {
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 0.2rem;
  color: white;
}

.et-slide-merch figure figcaption p {
  font-size: 1.1rem;
  letter-spacing: 0.1rem;
  color: white;
}
＆＃13; 
<!-- Merch page -->
<section class="et-slide" id="tab-shop">
  <div class="introback">
    <img src="merch/background.jpg">
    <div class="merchoverlay">
      <h1>MERCHANDISE</h1>
      <h2>Get everything you need right here.</h2><br><br><br>
      <section class="et-slide-merch">
        <figure>
          <img src="merch/unisexhoodie.png">
          <figcaption><br>
            <h>Everyday I'm<br>Shufflin' hoodie</h>
            <br>
            <p>Unisex - XS, S, M, L, XL, XXL</p>
          </figcaption>
        </figure>
        <figure>
          <img src="merch/unisexhoodie.png">
          <figcaption><br>
            <h>Everyday I'm<br>Shufflin' hoodie</h>
            <br>
            <p>Unisex - XS, S, M, L, XL, XXL</p>
          </figcaption>
        </figure>
        <figure>
          <img src="merch/unisexhoodie.png">
          <figcaption><br>
            <h>Everyday I'm<br>Shufflin' hoodie</h>
            <br>
            <p>Unisex - XS, S, M, L, XL, XXL</p>
          </figcaption>
        </figure>
        <figure>
          <img src="merch/unisexhoodie.png">
          <figcaption><br>
            <h>Everyday I'm<br>Shufflin' hoodie</h>
            <br>
            <p>Unisex - XS, S, M, L, XL, XXL</p>
          </figcaption>
        </figure>
      </section>
    </div>
  </div>
</section>
＆＃13;
＆＃13;
＆＃13;

任何帮助都非常感谢，提前感谢！

4 个答案:

答案 0 :(得分：0)

使用以下代码更改CSS元素。

  

删除/ *左：30％; * /来自＆＃34; merchoverlay＆＃34;并创建flex   有正当理由的环境将解决问题。

 .introback {
    display: flex;
    justify-content: center;
}
.merchoverlay {
    position: absolute;
    top: 10vh;
    /* left: 30%; */
    height: 100% width: 60%;
    color: white;
    z-index: 1;
    text-align: center;
    vertical-align: center;
    padding: 0;
    justify-content: center;
    margin: 0;
}

如果添加以下更改，则文本（h1 anf h2）内容也会成为中心。

.et-hero-tabs h2, .et-slide h2 {
    font-size: 3rem;
    margin: 0;
    letter-spacing: 0.6rem;
    color: white;
    /* width: 60%; */
}

.et-hero-tabs h1, .et-slide h1 {
    color: white;
    font-size: 1.5rem;
    /* width: 60%; */
}

希望这会对你有所帮助。 欢呼声。

答案 1 :(得分：0)

您在css代码中遇到语法错误。在这里采取更新的样式：

.introoverlay {
  position: absolute;
  top: 20vh;
  left: 20%;
  height: 100%;
  width: 60%;
  color: white;
  z-index: 1;
  text-align: center;
  vertical-align: center;
  padding: 0;
  margin: 0;
}

答案 2 :(得分：0)

添加以下CSS：

.merchoverlay {
    left: unset;
    width: 100%;
}

.et-slide-merch {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.merchoverlay h1, .merchoverlay h2 {
    margin-left: auto;
    margin-right: auto;
}

答案 3 :(得分：0)

首先，您需要将flex-wrap: wrap;和justify-content: center;添加到.et-slide-merch以及下面的一些小的CSS调整

.merchoverlay {
    /* remove left: 30%; */
    width: 100%;
}

.et-slide-merch {
    flex-wrap: wrap; 
    /* remove align-items: center; */
    justify-content: center;
    /* remove height: 40vh; */
}

示例： 

.et-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
  background: black;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}

.introback {
  position: relative;
  height: 100vh;
  width: 100%;
}

.introback img {
  text-align: center;
  position: relative;
  z-index: 0;
  width: 100%;
}

.introoverlay {
  position: absolute;
  top: 20vh;
  left: 30%;
  height: 100% width: 60%;
  color: white;
  z-index: 1;
  text-align: center;
  vertical-align: center;
  padding: 0;
  margin: 0;
}

.merchoverlay {
  position: absolute;
  top: 10vh;
   /* left: 30%; remove*/
  height: 100% width: 60%;
  color: white;
  z-index: 1;
  text-align: center;
  vertical-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}


.et-slide-merch {
  display: flex;
  /* height: 40vh; remove*/
  text-align: center;
  padding: 0;
  left: 30%;
  width: 100%;
  
  justify-content: center;
  flex-wrap: wrap;
     
   
   
    
    
}

.et-slide-merch figure {
  display: inline-block;
  margin: 20px;
}

.et-slide-merch figure img {
  display: inline-block;
  vertical-align: top;
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

.et-slide-merch figure figcaption {
  border: 0px;
  text-align: center;
  color: white;
}

.et-slide-merch figure figcaption h {
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 0.2rem;
  color: white;
}

.et-slide-merch figure figcaption p {
  font-size: 1.1rem;
  letter-spacing: 0.1rem;
  color: white;
}



.merchoverlay {
    /* left: 30%; */
    width: 100%;
}

.et-slide-merch {
    flex-wrap: wrap; */
    justify-content: baseline;
    /* align-items: center; */
    justify-content: center;
    /* height: 40vh; */
}
<!-- Merch page -->
<section class="et-slide" id="tab-shop">
  <div class="introback">
    <img src="http://i385436.hera.fhict.nl/theshufflr/merch/background.jpg">
    <div class="merchoverlay">
      <h1>MERCHANDISE</h1>
      <h2>Get everything you need right here.</h2><br><br><br>
      <section class="et-slide-merch">
        <figure>
          <img src="http://i385436.hera.fhict.nl/theshufflr/merch/unisexhoodie.png">
          <figcaption><br>
            <h>Everyday I'm<br>Shufflin' hoodie</h>
            <br>
            <p>Unisex - XS, S, M, L, XL, XXL</p>
          </figcaption>
        </figure>
        <figure>
          <img src="http://i385436.hera.fhict.nl/theshufflr/merch/unisexhoodie.png">
          <figcaption><br>
            <h>Everyday I'm<br>Shufflin' hoodie</h>
            <br>
            <p>Unisex - XS, S, M, L, XL, XXL</p>
          </figcaption>
        </figure>
        <figure>
          <img src="http://i385436.hera.fhict.nl/theshufflr/merch/unisexhoodie.png">
          <figcaption><br>
            <h>Everyday I'm<br>Shufflin' hoodie</h>
            <br>
            <p>Unisex - XS, S, M, L, XL, XXL</p>
          </figcaption>
        </figure>
        <figure>
          <img src="http://i385436.hera.fhict.nl/theshufflr/merch/unisexhoodie.png">
          <figcaption><br>
            <h>Everyday I'm<br>Shufflin' hoodie</h>
            <br>
            <p>Unisex - XS, S, M, L, XL, XXL</p>
          </figcaption>
        </figure>
      </section>
    </div>
  </div>
</section>

相关问题
最新问题