Image will not center

Question

I am having a really hard time with getting this image centered.

I have tried the following:

margin: 0 auto;
display: block;

text-align: center;

I really do not want to use the left command because it isn't working in my mobile setting. I just want a fixed property that will work everywhere and I won't have to add it again.

Why is this image not centering?

#section3-container {
    position: absolute;
    top: 25%;
    text-align: center;
    width: 80%;
    margin: 0 10%;
}
.approach-tablet {
    bottom: 0;
    position: relative;
    /*left: 50%;*/
    height: 200px;
    width: auto;

}
.approach-tablet img {
    display: block;
    margin: 0 auto;
}

<div id="section3-container">
</div>
<img src="/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">

I had also tried the below but it still doesn't work.

.approach-tablet {
    bottom: 0;
    position: absolute;
    /*left: 50%;*/
}
img.approach-tablet {
    display: block;
    margin: 0 auto;
    text-align: center;
}

I need the position: absolute to position the div where I am wanting it to go. It sits on the bottom of the page. Regardless, the image isn't centering with what is in there.

@Harry I tried that and it still doesn't center. I tried the same `margin: 0 auto; display: block; text-align: center;` as I had in my question. — Becky, Mar 12 '16 at 05:54
I need it to position the div where I am wanting it to go. It sits on the bottom of the page. Regardless, the image isn't centering with what is in there. — Becky, Mar 12 '16 at 06:00
Because it isn't working in my mobile setting. I just want a fixed property that will work everywhere and I won't have to add it again. — Becky, Mar 12 '16 at 06:06

score 1 · Answer 1 · answered Mar 12 '16 at 05:54

Please use below code

<div id="section3-container">
  <img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
</div>

CSS

#section3-container {
 margin: 0 auto;
 text-align: center;
 width: 100%;
}
.approach-tablet {
 height: 200px;
 margin: 0 auto;
 text-align: center;
 width: auto;
}

score 1 · Accepted Answer · edited May 23 '17 at 12:07

1

As indicated in this SO answer, an element that is positioned absolutely cannot be centered using the margin: 0 auto method and you would have to resort to other options.

One option would be to use left: 50% and then use transform: translateX(-50%) to get it back to the center. The left: 50% offsets the image 50% from the left edge of the page (but this alone will not center the image because the image's left edge is at page center). The translateX(-50%) moves the image to the left by half of the image's width and thus would result in the image's center being at page center.

This should work in all modern browsers (including mobile) as the browser support is good. As can be seen from the snippet (view it in normal mode and full page mode), no special tweaking is needed for it to be responsive.

Note: Though you had stated that you don't want to use left property in the question, I understand based on your comment that the reason was that mobile support is needed and be responsive.

#section3-container {
  position: absolute;
  top: 25%;
  text-align: center;
  width: 80%;
  margin: 0 10%;
}
.approach-tablet {
  bottom: 0;
  position: absolute;
  left: 50%;
  height: 200px;
  transform: translateX(-50%);
}

<div id="section3-container">
</div>
<img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">

edited May 23 '17 at 12:07

Community

1
1

answered Mar 12 '16 at 06:12

Harry

87,580
25
202
214

No. This is the only thing I have in my `media query` `.approach-tablet { max-height: 150px; width: auto; }` – Becky Mar 12 '16 at 06:22
I have no idea... I keep fiddling with it and nothing will bring it over to the left. – Becky Mar 12 '16 at 06:28
1

I think I was having a cache issue. I am very sorry. It wasn't working on my desktop's shrunken down window and my phone, so I thought it was the code. – Becky Mar 12 '16 at 06:44
1

This definitely resolved it. Thanks so much and again sorry for making this much longer than it should have been! – Becky Mar 12 '16 at 06:47
1

@Becky I have removed my previous comments (to keep the thread short) because they were just trial and error and also the comments under question (for same reason) because I added your feedback into the question. By the way, you're welcome and happy to know that it helped :) – Harry Mar 12 '16 at 06:48

score 0 · Answer 3 · answered Mar 12 '16 at 05:50

Your image is outside of the div. If you put it inside, it centers

#section3-container {
 position: absolute;
 top: 25%;
 text-align: center;
 width: 80%;
    margin: 0 10%;
}
.approach-tablet {
    bottom: 0;
    position: relative;
 /*left: 50%;*/
  height: 200px;
  width: auto;

}
.approach-tablet img {
 display: block;
 margin: 0 auto;
}

<div id="section3-container">
  <img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
</div>

This center it, thanks, but I am looking for this to be outside of that div. — Becky, Mar 12 '16 at 05:54

score 0 · Answer 4 · answered Mar 12 '16 at 06:18

Just add another div, html is all about divs:

#section3-container {
 position: absolute;
 top: 25%;
 text-align: center;
 width: 80%;
    margin: 0 10%;
}
.approach-tablet {
    bottom: 0;
    position: relative;
 /*left: 50%;*/
  height: 200px;
  width: auto;

}

.approach-tablet img {
 display: block;
 margin: 0 auto;
}

#section4-container {
 text-align: center;
 width: 100%;
}

<div id="section3-container">
</div>
<div id="section4-container">
  <img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
</div>

Image will not center

4 Answers4