我已经尝试了一切方法将图像放在 @media only 屏幕和(最大宽度:480px)的页面上居中,但是没有任何效果。
代码如下:
前端
<figure class="img1 embed">
<img src="Images/testimonial-2.jpg" alt=""/>
</figure>
CSS
/*** Base Caption Styles ***/
figure.embed,
figure.embed-top,
figure.overlay,
figure.embed-over {
display: inline-block;
vertical-align: top;
position: relative;
margin: 0.5em;
font-size: 0.8em;
background: white;
overflow: hidden;
float: right;
}
figure.embed img,
figure.embed-top img,
figure.overlay img,
figure.embed-over img {
width: 100%;
display: block;
}
figure.embed figcaption,
figure.embed-top figcaption,
figure.overlay figcaption,
figure.embed-over figcaption {
width: 100%;
padding: 0.5em;
/* neutral theme */
color: rgba(50,50,50,1.0);
background: rgba(200,200,200,0.825);
}
任何人都可以告诉我需要对此代码执行什么操作才能使图像居中吗?我尝试过显示: block ; margin: 0 auto 和 margin-left: auto; margin-right:自动,但无济于事。
任何帮助将不胜感激!
最佳答案
包含图像的元素(figure
)当前向右浮动。相反,请将其放置在本身就是 block 元素的容器中。使 figure
成为内联 block 元素。您可以通过在外部容器上设置 text-align: center
使图形在其容器中居中(请务必将其设置回 initial
,以便其中的文本也不会居中) 。此外,您可以通过删除 width:100%
并添加 auto
margin-left
和 margin-right< 来使图像居中。/
.
.outer {
display: block;
text-align: center;
}
/*** Base Caption Styles ***/
figure.embed,
figure.embed-top,
figure.overlay,
figure.embed-over {
display: inline-block;
text-align: initial;
vertical-align: top;
position: relative;
margin: 0.5em;
font-size: 0.8em;
background: white;
overflow: hidden;
}
figure.embed img,
figure.embed-top img,
figure.overlay img,
figure.embed-over img {
display: block;
margin-left: auto;
margin-right: auto;
}
figure.embed figcaption,
figure.embed-top figcaption,
figure.overlay figcaption,
figure.embed-over figcaption {
width: 100%;
padding: 0.5em;
/* neutral theme */
color: rgba(50,50,50,1.0);
background: rgba(200,200,200,0.825);
}
figcaption {
display: block;
}
<div class="outer">
<figure class="img1 embed news">
<img src="http://placehold.it/250" alt="">
<figcaption> Text. </figcaption>
</figure>
</div>
关于css - 如何使图像在图形内居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28325033/