images centered on firefox and chrome but not edge

Question

I am trying to center an image in a block using CSS and HTML. The code I am currently using works for both firefox and chrome but Microsoft Edge will not center. Chrome and firefox are both picking up the webp format of the image, while internet explorer is picking up the png.

I have tried using inline property instead of block for css. I have tried creating a function in CSS and applying that function to the HTML. I have tried setting an attribute name to the HTML box and editing the css to alter that box only. Virtually all of these things except for inline have worked on chrome and firefox. None work on edge.

<picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.png" type="image/png">
    <img src="image.png" alt="circle of excellence" class="displayed" width="300" height="290"> 
</picture>

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }

I expected the image to be centered on all browsers. It was centered on all but Internet Explorer. I take this to mean there is something wrong with the way the png image is interacting with the code. Or my code is written in such a way as to exclude the png from centering.

Works fine for me: https://jsfiddle.net/7ck6a3oe/ – Pete Sep 12 '19 at 13:33 — Pete, Sep 12 '19 at 13:33

score 0 · Answer 1 · answered Sep 12 '19 at 13:33

0

Apparently the cash needed to reset in my microsoft edge. This code works perfectly. SMH

answered Sep 12 '19 at 13:33

Xcalybxr

17
3

score 0 · Answer 2 · answered Sep 12 '19 at 13:34

I just center the picture tag and it is working fine..

try this...

picture {
    display: block;
    text-align: center;
}

<picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.png" type="image/png">
    <img src="image.png" alt="circle of excellence" class="displayed" width="300" height="290"> 
</picture>

images centered on firefox and chrome but not edge

2 Answers2