Geek Answers Handbook

How to center the image inside the figure?

I tried everything to center the image on the page just for the @media screen and (max-width: 480px), however, nothing works.

The code is as follows:

Front end

<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);
}

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

Any help would be greatly appreciated!

+4
source share
1 answer

, (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;
}
<div class="outer">
<figure class="img1 embed news">
  <img src="http://placehold.it/250" alt="">
  <figcaption> Text. </figcaption>
</figure>
</div>
+2

More articles:


All Articles