CSS issue center image:

Hi!

I am trying to center an image using css, but it doesn't seem to work in Chrome. Can someone please help me out?
Code below:

Code:
<ul style="text-align: justify;width: 1038px; list-style-type: none; margin: 0; padding: 0; overflow: hidden;border-radius: 25px;">

<li style="background: linear-gradient(purple, pink, orange);width: 208px;height: 200px;float: left;border: 2px solid; color: red;border-radius: 25px;margin: 0; padding: 0;">
<center><a href="https://www.instagram.com" target="_blank"><img src="https://i.imgur.com/c7yNApg.png" style="width:150px;height:150px;margin: 0; padding: 0;align:center;"></a></center>
</li>

</ul>
Also, I KNOW I should not use the style-tags and whatnot, BUT, the code is meant to be added in a user-page where very limited html is allowed. So please spare me any snarky remarks about this, thanks!​
 
Probably better luck on a forum for html and css users.
But from what I remember about it, try adding a container like an extra div around the image and centering that.
 
There may be a bit more to it to I just remembered. Like setting the margins and padding to zero and making the image an inline-block. Sorry I can't be more specific, it's been over a year since I had to do this
 

JackTurbo

Member
looks like the image has a defined width of 150px? if so you can just set position 50% left and set it's left margin to -half the width.
Code:
position: relative;
width: 150px;
left: 50%;
margin-left: -75px;
 
Top