CSS HTML我的文本对齐和我的显示内嵌块不起作用
CSS HTML我的文本对齐和我的显示内嵌块不起作用
提问于 2018-06-14 03:57:58
代码
#step-1,
#step-2,
#step-3 {
display: inline-block;
text-align: 30px;
height: 150px;
}<section id="steps">
<div class="wrapper">
<ul>
<li id="step-1">
<img src="IMAGE/steps-icon-1.png">
<h3 class="toUppercase">Plannifier</h3>
<p>text text text </p>
</li>
<li id="step-2">
<img src="IMAGE/steps-icon-2.png">
<h3 class="toUppercase">Organiser</h3>
<p>text text text</p>
</li>
<li id="step-3">
<img src="IMAGE/steps-icon-3.png">
<h3 class="toUppercase">Voyager</h3>
<p>text text text</p>
</li>
</ul>
</div>
它正在做什么
[
我想要实现的东西
[
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-14 04:07:19
使用flex来实现这一点
.wrapper {
width: 80%;
margin: auto;
}
ul {
display: flex;
justify-content: space-around;
list-style-type: none;
}
#step-1,
#step-2,
#step-3 {
margin-right: 15px;
height: 150px;
width: 30%;
}<section id="steps">
<div class="wrapper">
<ul>
<li id="step-1">
<img src="IMAGE/steps-icon-1.png">
<h3 class="toUppercase">Plannifier</h3>
<p>text text text </p>
</li>
<li id="step-2">
<img src="IMAGE/steps-icon-2.png">
<h3 class="toUppercase">Organiser</h3>
<p>text text text</p>
</li>
<li id="step-3">
<img src="IMAGE/steps-icon-3.png">
<h3 class="toUppercase">Voyager</h3>
<p>text text text</p>
</li>
</ul>
</div>
</section>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50845291
复制相关文章
相似问题
腾讯云开发者
