CODEWITHSUNDEEP
cssimagecentercentering
charlieg007
charlieg007

Reputation: 99

How to center the image inside of figure?

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

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 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!

Upvotes: 8

Views: 22758

Answers (2)

SEBASTI&#193;N TERRAZAS
SEBASTI&#193;N TERRAZAS

Reputation: 1

Just style de image with "margin: auto;"

Upvotes: 0

MatthewG
MatthewG

Reputation: 9293

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>

Upvotes: 4

Related Questions