Why won't these images center?

I'm at my wit's end for something so simple.

http://dev2.magickitchen.com/landing/deliver.html

The two food images won't center. I've tried putting them into a row with clearfix, then a col-md-12. but they still won't center.

It must be something easy that I'm missing, right??
Melody ScottAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
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;
}

Open in new window

Melody ScottAuthor Commented:
oh, thanks, I hadn't seen that.
Melody ScottAuthor Commented:
That's fixed, thanks! Still not center, though. I might need to rebuild that page.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Melody ScottAuthor Commented:
Whoa, wait! Now they are centered and gigantic. :) I'll have to figure that one out.
Christopher Jay WolffWiggle My Legs, OwnerCommented:
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.
Melody ScottAuthor Commented:
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.
Trenton KnewOwner / Computer WhispererCommented:
When I want to center things horizontally, I use a containing div first, and then use "margin-left:auto; margin-right:auto;" on the item inside the containing div.  You need to specify the width of the containing div for this to work.

example for a single image:
<div style="width:100%;">
  <div style="width:600px; margin-left:auto; margin-right:auto;">
    <img src="filename.jpg" />
  </div>
</div>

Open in new window


You can also specify a percentage instead of the hard px value.

I'm not sure if this helps or not, as when I visited the page, I didn't see any centering issues, so I'm not sure what you're going for

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Michael MachieIT SupervisorCommented:
Spectator Comment:
I viewed the site and see both pictures centered properly.

The site looks good too!
Christopher Jay WolffWiggle My Legs, OwnerCommented:
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:

My crude html to center image.
from the htm I attached.

I'm on IE 11, Surface RT 8.1
WebPageCenterImage.htm
Melody ScottAuthor Commented:
Hi, Christopher,  I did have <p style="text-align:center;">, which I think is essentially the same thing.
Melody ScottAuthor Commented:
Wow, there are some great comments here. I'll go through the ideas and see what I can get, thanks!
Melody ScottAuthor Commented:
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.
Trenton KnewOwner / Computer WhispererCommented:
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?
Melody ScottAuthor Commented:
On second thought, I'll just make it one photo. It works, and I don't have time to mess with it anymore. Thanks!
Melody ScottAuthor Commented:
I found a really good way to do this, which is to give the image:  class="img-responsive center-block"
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.