Centering an image with container width 100%

Solved
albedolife
Tourist
3 0 1

Hi guys,

Thanks for checking out my question.

For the life of me I cannot figure out how to center two images on the homepage. I've tried nearly every CSS tutorial out there, changed around the code probably 100 times, and I still can't get it. It seems that there are potentially issues with the container width being limited to 100% based on the Googling I've done, but not really sure if that's true.

Here's the issue: On the https://albedo.life/ homepage, you'll see two .gifs, right below the "How It Works" h2 tag that are stuck on the left. Here's the code I'm using...

<style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 50%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

/*Center all images */
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*Rounds the images */
img {
  border-radius: 20%;
}
</style>

<div style="text-align:center;">
<h2>How It Works</h2>

<div class="row">
  <div class="column">
    <img src="https://cdn.shopify.com/s/files/1/0407/0581/8792/files/Sunscreen_Gif.gif?v=1600973855" alt="How to apply sunscreen" style="width:75%"><h3>Face Surf Sunscreen</h3>
<p>Apply sunscreen directly to your face —&nbsp;it’s water-resistant and lab-tested SPF 30+.</p>
  </div>
  <div class="column">
    <img src="https://cdn.shopify.com/s/files/1/0407/0581/8792/files/Moisturizer_Gif.gif?v=1600973871" alt="How to apply moisturizer" style="width:75%"><h3>After-Surf Moisturizer</h3>
<p>Take a small dab in your hands, rub together, and spread on your face. It’ll wash away any grime.</p>
  </div>
</div>
</div>

How do I horizontally center those two .gifs on the homepage? I have tried so, so many ways over the past two weeks that I finally need to throw in the towel and ask for help. Thanks so much.

0 Likes
Winbox
Excursionist
26 6 5

Alignment does not apply to elements that have been floated left or right. They will just lean to the left or right. Instead, you could remove the floats and change them into inline-blocks. This will treat them like text but remain as a block. Then text-align will work.

So instead of this:

.column {
    float: left;
}

Try this:

.column {
    display: inline-block;
    vertical-align: top;
}

 The vertical-align will flush them to the top.

albedolife
Tourist
3 0 1

Thanks SO much for replying, Winbox.

So I updated that line of code, so the complete code block looks like this:

<style>
* {
  box-sizing: border-box;
}

.column {
  display: inline-block;
  vertical-align: top;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

/*Center all images */
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*Rounds the images */
img {
  border-radius: 20%;
}
</style>

<div style="text-align:center;">
<h2>How It Works</h2>

<div class="row">
  <div class="column">
    <img src="https://cdn.shopify.com/s/files/1/0407/0581/8792/files/Sunscreen_Gif.gif?v=1600973855" alt="How to apply sunscreen" style="width:75%"><h3>Face Surf Sunscreen</h3>
<p>Apply sunscreen directly to your face —&nbsp;it’s water-resistant and lab-tested SPF 30+.</p>
  </div>
  <div class="column">
    <img src="https://cdn.shopify.com/s/files/1/0407/0581/8792/files/Moisturizer_Gif.gif?v=1600973871" alt="How to apply moisturizer" style="width:75%"><h3>After-Surf Moisturizer</h3>
<p>Take a small dab in your hands, rub together, and spread on your face. It’ll clean off any grime.</p>
  </div>
</div>
</div>

But it looks like those images are still staying on the left side, instead of centering: https://albedo.life/

Bah! Any other ideas? Thanks again.

0 Likes
Winbox
Excursionist
26 6 5

This is an accepted solution.

I see that the "float: left" is still there. Be sure to remove it from the 2nd ".column" in the CSS.

albedolife
Tourist
3 0 1

Amazing! Thank you, Winbox. That was in another code block, and totally missed that until I dug deeper. I fixed and it looks awesome now. Thank you, thank you, thank you!

Winbox
Excursionist
26 6 5

Glad to hear that it's working!

Cheers!

0 Likes