如何将图像置于图形中心？ [英] How to center the image inside of figure?

问题描述

我已尝试将所有内容集中在页面上以@media only屏幕为中心（max-width：480px），但无效。

I have tried everything to center an image on the page for @media only screen and (max-width:480px), however nothing will work.

代码如下：

前端

<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自动和保证金左：自动;保证金权利：自动，但无济于事。

Can anyone please advise what I would need to do to this code for the image to center? I've tried display: block; margin: 0 auto and margin-left: auto; margin-right: auto, but to no avail.

任何帮助都将不胜感激！

Any help would be much appreciated!

推荐答案

包含图像的元素（图）目前正在浮动。相反，将它放在一个容器中，该容器本身就是一个块元素。使数字成为一个内联块元素。您可以通过在外部容器上设置 text-align：center 将数字置于其容器中心（确保将其设置回 initial 因此内部文本也不居中）。此外，您可以通过删除 width：100％并添加 auto 来使图像居中。 margin-left 和 margin-right 。

The element containing your image (the figure) is currently floated right. Instead, place it within a container which is itself a block element. Make the figure an inline-block element. You can center the figure in its container by setting text-align: center on the outer container (be sure to set it back to initial so text within is not also centered). In addition, you can center the image within by removing width:100% and adding auto margin-left and 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>

这篇关于如何将图像置于图形中心？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！