我有一个简单的问题要问:我的页面上有这些框
如您所见,框内的图像未正确对齐,可能是因为 <p>
紧接在上面的可以有一行和两行。
有没有办法让图像自动固定在框的中间,并保持框的响应?
查看代码
<div id="parent">
<div class="child no-autor">
<p>
Che cos'è
la fattura elettronica
</p>
<img src="https://bdconsulenzastorage.blob.core.windows.net/site-assets/images/eFattura_images/ico-step-1.png" class="img-responsive child child-no-autor"/>
<a href="#">
<p>
<i class="material-icons middle-align-text">
play_circle_filled
</i>
Guarda il video
</p>
</a>
</div>
<div class="child no-autor">
<p>
Chi è obbligato
alla
fatturazione elettronica
</p>
<img src="https://bdconsulenzastorage.blob.core.windows.net/site-assets/images/eFattura_images/ico-step-2.png" class="img-responsive child child-no-autor" />
<a href="#">
<p>
<i class="material-icons middle-align-text">
play_circle_filled
</i>
Guarda il video
</p>
</a>
</div>
<div class="child">
<h5>SCELTA 1</h5>
<p>
Intermediario
sì o no
</p>
<img src="https://bdconsulenzastorage.blob.core.windows.net/site-assets/images/eFattura_images/png%20base%20300/01_g.png" class="img-responsive child child-one-line" />
<a href="#">
<p>
<i class="material-icons middle-align-text">
play_circle_filled
</i>
Guarda il video
</p>
</a>
</div>
.less 上的代码
#parent {
display: flex;
flex-wrap: wrap;
text-align: center;
}
.child {
// background: red;
flex: 1;
min-width: 15%;
margin-right: 10px;
border: 2px solid #c1bdbe;
margin-bottom: 25px;
max-height: 260px;
a {
color: #5b93a2;
}
.middle-align-text {
vertical-align: middle;
}
&.child-one-line {
margin-top: 25px;
}
&.child-no-autor {
margin-top: 35px;
}
&.no-autor {
p {
margin-top: 10px;
}
}
.img-responsive.child {
width: 45px;
height: 45px;
display: block;
margin-left: auto;
margin-right: auto;
border: none;
}
p {
font-weight: bold;
font-size: 11px;
}
h5 {
color: #5b93a2;
font-weight: bold;
}
}
最佳答案
请为这些标签使用这种样式。
img{
width:auto;
margin:0 auto;
display:block;
float:none;
max-width:100%;
}
关于css - 图像固定在中心的框内,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51357116/