0

Magento 2 (2.1.10). I can't get my images to center within this block.

I have three columns. I want the left column to have centered text and images.

<style>
.column {
    float: left;
    padding: 10px;
}
.middle, .right {
  width: 25%;
}
.left {
  width: 50%;
}
.text-center {
   text-align: center;
}

@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
} 
</style>

Images I can't seem to center (h2/normal text center, including link at end of images):

<div class="column left text-center">
    <h2>Title</h2>
    Summary.<br /> <br /> 
    <div class="lazyload" data-ui="jscroll-images">
        <img class="lazy" data-original="/image1.jpg" width="300" height="382" />
        <img style="padding-top: 5px;" class="lazy" data-original="/image2.jpg" width="300" height="374" /> 
        <img style="padding-top: 5px;" class="lazy" data-original="/image3.jpg" width="300" height="382" />
        <img style="padding-top: 5px;" class="lazy" data-original="/image4.jpg" width="300" height="374" />
    <p style="clear: both;"><br><br><a href="">See more!</a></p>
</div>

I had to add the p style because otherwise the See more! link ended up next to image1.

I have also tried adding the following css, which changed nothing:

img {
margin-left:auto;
margin-right:auto;
}

And tried adding the margins to .left:

.left {
      width: 50%;
      margin-left:auto;
      margin-right:auto;
    }

When I remove float: left; from .column, then my middle/right columns end up below the left column.

I wish <center> tags would work :'(

  • image {display: inline-block} – xanka Jul 27 '18 at 3:27
  • try this .lazy { float: left; width: 32%; padding: 8px; } – Rahul Singh Jul 27 '18 at 5:39
  • I should've mentioned I tried image {display: inline-block} - tried again just now to be sure; does not fix. Tried the .lazy css. Didn't center and stopped the lazyload from functioning. – Hannah Jul 27 '18 at 17:25
0

So apparently the float:left; was at odds with the margin:auto;. I needed the float:left; for other formatting, so I simply added to the image style tags "padding-top: 5px; float:none !important;" and that fixed it!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.