CSS issue center image:

Discussion in 'Off Topic' started by obsidiannovels, Mar 18, 2019.

Tags:
  1. obsidiannovels

    obsidiannovels Member

    Joined:
    Jun 20, 2016
    Posts:
    244
    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!​
     
  2. Siolfor the Jackal

    Siolfor the Jackal Member

    Joined:
    Jun 21, 2016
    Posts:
    758
    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.
     
  3. obsidiannovels

    obsidiannovels Member

    Joined:
    Jun 20, 2016
    Posts:
    244
    Thanks, I'll try that.
     
  4. Siolfor the Jackal

    Siolfor the Jackal Member

    Joined:
    Jun 21, 2016
    Posts:
    758
    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
     
  5. JackTurbo

    JackTurbo Member

    Joined:
    Oct 19, 2016
    Posts:
    824
    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; 
    
    
     
    Pfap and obsidiannovels like this.
  6. obsidiannovels

    obsidiannovels Member

    Joined:
    Jun 20, 2016
    Posts:
    244
    Worked very well! Thank you!
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice