尝试将我的三个数字对齐,例如:图像与3个图像中的每个图像下方的标题和描述。这目前有效,但我有高度问题。即如果<p>
描述的长度不同,则数字将从不同的点开始,因此帧不再相互对齐。我回顾了旧帖子,发现了某种显示方式:flex解决方案,但我并不是真的理解/喜欢它。有什么建议吗?
HTML
<section class = "container site-repairs">
<figure>
<img src = "repair1.png"/>
<h3>Rof Repair</h3>
<p> Concrete, Slate, Felt or Fibreglass Cormack Roofing can repair any roofing problems you have
Skylights Extra lighting can make all the difference in your home please contact
</p>
</figure>
<figure>
<img src = "repair2.png"/>
<h3>Skylights</h3>
<p>
Extra lighting can make all the difference in your home please contact us to find out more
</p>
</figure>
<figure>
<img src = "repair3.png"/>
<h3>Gutters/Facias</h3>
<p> Gutters and Facia boards play an important part in keeping your home dry</p>
</figure>
</section>
CSS
.site-repairs{
text-align:center;
padding:0;
}
.site-repairs figure{
display:inline-block;
padding:0;
}
.site-repairs img{
}
.site-repairs h3{
margin:0;
padding:0;
padding-top:5px;
}
.site-repairs p{
padding:0;
margin:0;
width:131px;
word-wrap:break-word;
font-size:13px;
margin-top:15px;
color:grey;
}
答案 0 :(得分:0)
对于所有3个图像和描述,您可以将它们包装起来并将显示设置为flex,以便将它们对齐居中。之后,您可以将每个图像的描述放在3个容器中,这个容器也将显示为flex,您可以将其flex-direction设置为列,这样您就可以将它们放在另一个容器旁边,当然也可以将它们对齐居中。
答案 1 :(得分:0)
试试这个:
使站点修复类的位置相对并且其中的内容绝对解决了问题。使位置:绝对的数字将对齐所有元素,并为每个元素添加边距将固定每个数字位置。
HTML:
<figure style = "margin-left: 20%">
<img src = "https://freeiconshop.com/wp-content/uploads/edd/code-flat.png"/>
<h3>Rof Repair</h3>
<p> Concrete, Slate, Felt or Fibreglass Cormack Roofing can repair any roofing problems you have
Skylights Extra lighting can make all the difference in your home please contact
</p>
</figure>
<figure style = "margin-left: 40%">
<img src = "https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Html-512.png"/>
<h3>Skylights</h3>
<p>
Extra lighting can make all the difference in your home please contact us to find out more
</p>
</figure>
<figure style = "margin-left: 60%">
<img src = "http://www.iconsdb.com/icons/preview/caribbean-blue/code-optimization-2-xxl.png"/>
<h3>Gutters/Facias</h3>
<p> Gutters and Facia boards play an important part in keeping your home dry</p>
</figure>
CSS:
.site-repairs{
padding:0;
position: relative;
}
.site-repairs figure{
display:inline-block;
padding:0;
position: absolute;
}
.site-repairs h3{
margin:0;
padding:0;
padding-top:5px;
}
.site-repairs p{
padding:0;
margin:0;
width:131px;
word-wrap:break-word;
font-size:13px;
margin-top:15px;
color:grey;
}
img {
width: 40px;
}
我使用了一些随机图像进行显示。