I used flexbox and autoprefixer to align a lot of stuff on this website.
Now in spite of me using autoprefixer, my client sent me the following screenshots of one of the sections:
As you can see the images are not aligned in the center of the circle. This is not the case in all of the recent browsers, including IE 10+.
From what I could gather after visiting multiple SO threads, even Safari 5+ supports flex with prefixes. So I have no idea why my flex code is not working.
The HTML:
<figure class="focus-point" data-animation="fadeInUp" data-animation-delay="0.2">
<a href="">
<img src="images/focus-feature-points/2.jpg" alt="focus point">
</a>
<figcaption>
<h3>Engaging Educational Games</h3>
</figcaption>
</figure>
And the CSS for the <a> tag is as follows:
.focus-point > a {
overflow: hidden;
position: relative;
border-radius: 50%;
border: 3px solid;
display: inline-block;
height: 260px;
width: 260px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
-webkit-transition: all .3s;
transition: all .3s;
}
The version of Safari my client is using is 5.1.10.
Why in spite of me using prefixed code, my flexbox code still does not work?
I am also aware that some advanced flexbox properties might have problems in older browsers that do support flexbox partially (eg. flex-wrap), but as you can see I have only used the most basic flexbox properties in this example of mine.
What am I doing wrong?
