1

I'm having a trouble keeping my ul list in the centre of the page while aligning images inside li's aligned to the left. Basically, I have a lot of images posted by users and while I want them to be centered as a group (ul) I want each new one to appear on the left side. A good example would be https://dribbble.com/. If you scroll down you can see that the last picture is aligned to the left.

Here is my code:

<div class="profile-user-snaps">
        <ul class="user-snap-wrapper">
        <?php 
        $getsnap = mysql_query("SELECT * FROM snaps WHERE userid = '$profileid'");
        $rows = mysql_num_rows($getsnap);

        if($rows > 0) {
          while($snapinfo = mysql_fetch_array($getsnap)) {
              $snapid = $snapinfo['snapid'];
              $snappic = $snapinfo['snappic'];
                    ?>
           <li>
              <a href="#">
                 <div class="user-snap-box">
                    <img src="<?php echo $snappic?>"> 
                 </div>
              </a>
           </li>
           <?php }
           } ?>
      </ul>
</div>

And here is my CSS:

.profile-user-snaps {
    margin-top: 0.5em;
    min-height: 500px;
    background: white;
    box-shadow: 1px 1px 2px #999999;
    text-align: center;
}
.user-snap-wrapper {
    border: 1px solid black;
    list-style: none;
    position: relative;
}
.user-snap-wrapper li {
    float: left;
    width: 25%;
    margin: 0.5em 0;
    position: relative;
}
.user-snap-wrapper li img {
    width: 90%;
}

When I use this code for text then everything is fine. However when I use this with images the last image appears aligned to the right. I will also try to post two images to somehow illustrate what I mean: This is what I want to achieve.

What I want to achieve

And this is what I get.

This is what I have

Any help is much appreciated.

Thank you.

davidb
  • 1,503
  • 4
  • 30
  • 49
  • This basically isn't possible natively with the line box model....you need to use media queries to adjust as you go. – Paulie_D Jul 10 '16 at 22:27
  • Hello Paulie, do you think that if I changed the image width to a fixed width that could change something? Is there really no other way? Also, if I used media queries how would I need to change the css here? – davidb Jul 10 '16 at 22:35
  • If the images were fixed width is would make the media queries simpler to calculate but that's about all. Basically, you have the problem described here - http://stackoverflow.com/questions/34995740/css-when-inline-block-elements-line-break-parent-wrapper-does-not-fit-new-width – Paulie_D Jul 10 '16 at 22:37
  • Cheers Paulie, will give it a read. – davidb Jul 10 '16 at 22:40

0 Answers0