【发布时间】：2018-04-04 23:41:28
【问题描述】：
对于一个学校项目，我需要制作一个网站，作为我们项目的一部分（制作一个可以洗牌和发牌的乐高机器人）。在我网站的商品部分，我的数字排列成一排，但不知何故它们没有居中（参见商品标签：http://i385436.hera.fhict.nl/theshufflr/index.html），我已经尝试了所有方法。
这些应该居中：
有人可以帮我解决这个问题吗？以下是与商品标签配合的部分代码：
.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;
}<!-- 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>任何帮助都非常感谢，在此先感谢！
【问题讨论】：
-
我已经添加了一个屏幕截图，我很确定你会得到什么。如果我错了，请告诉我（编辑）
-
那是因为你使用 left:30% simple use text-align center to center 定位....
-
<br>现在已弃用，不应使用，请使用边距或填充到空间元素而不是<br>developer.mozilla.org/en-US/docs/Web/HTML/Element/br