我已尝试将所有内容集中在页面上以@media only屏幕为中心(max-width: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);
}
任何人都可以告诉我需要对此代码做什么才能使图像居中?我试过显示:块;保证金:0自动和保证金左:自动; margin-right:auto,但无济于事。
非常感谢任何帮助!
答案 0 :(得分:2)
包含图片的元素(figure
)目前正在浮动。相反,将它放在一个容器中,该容器本身就是一个块元素。使figure
成为内联块元素。您可以通过在外部容器上设置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;
}
&#13;
<div class="outer">
<figure class="img1 embed news">
<img src="http://placehold.it/250" alt="">
<figcaption> Text. </figcaption>
</figure>
</div>
&#13;