如何将图像置于图形中心?

时间:2015-02-04 15:25:51

标签: css image center centering

我已尝试将所有内容集中在页面上以@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,但无济于事。

非常感谢任何帮助!

1 个答案:

答案 0 :(得分:2)

包含图片的元素(figure)目前正在浮动。相反,将它放在一个容器中,该容器本身就是一个块元素。使figure成为内联块元素。您可以通过在外部容器上设置text-align: center来将图形置于其容器中心(确保将其设置回initial,以使其中的文本也不居中)。此外,您可以通过删除width:100%并添加auto margin-leftmargin-right来使图像居中。

&#13;
&#13;
.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;
&#13;
&#13;