Why won't these images center?

I don't know if this is it but you have an error or extra characters in your bootstrap.css file.  width: 100% \9;??

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  width: 100% \9;
  max-width: 100%;
  height: auto;
}

Select allOpen in new window

oh, thanks, I hadn't seen that.

That's fixed, thanks! Still not center, though. I might need to rebuild that page.

Whoa, wait! Now they are centered and gigantic. :) I'll have to figure that one out.

This came up in my search:


How do I center an image in HTML?

Apply the center alignment to the container of the image and not the image itself. A CSS example is provided below.

In the styles tag:
.centerImage {text-align: center;}

Now in the container add the class:
<div class="centerImage"><img src="....."></div>

from the link:
http://www.netmechanic.com/news/vol7/html_no10.htm


If you go to the link and scroll down to Centering in CSS it's a little different than what you have.  Not a pro a html by any stretch, but I'm going to play with it.  You'd be faster looking at it yourself I bet.

Yeah, there is something wrong with my img-responsive class.  I have to leave, I'll look when I get back. That /9 was something that's a hack for browsers before IE9, not sure why that was in there.

Spectator Comment:
I viewed the site and see both pictures centered properly.

The site looks good too!

Hi again.
I read at the link I posted it can be browser independent.  When I look at the page they are still left justified.  When I did my little hack using the example under the CSS section, I got the following:


from the htm I attached.

I'm on IE 11, Surface RT 8.1
WebPageCenterImage.htm

Hi, Christopher,  I did have <p style="text-align:center;">, which I think is essentially the same thing.

Wow, there are some great comments here. I'll go through the ideas and see what I can get, thanks!

Trenton Knew, that works here, thanks, where I have one image: http://dev2.magickitchen.com/landing/deliver.html

But when I have two, they stack. http://dev2.magickitchen.com/landing/diabetic-meals.html

I have the width at more than the combined width of the two photos. Any ideas? Thanks, I can go to one photo for this, too, but I'd like to solve the issue.

I'm guessing your image class with it's "display:block" and width:100% is what's getting in the way.  Is your goal to have the images appear next to each other when viewed on a wider resolution, but then stack if the resolution narrows?  Or are you trying to get them to stay side by side no matter what the resolution is?

On second thought, I'll just make it one photo. It works, and I don't have time to mess with it anymore. Thanks!

I found a really good way to do this, which is to give the image:  class="img-responsive center-block"