Image centering in responsive design

HTML & CSS
1

I have a one page responsive design.
http://www.openrangeimaging.com/Test/tommytyme/index.html

I cannot figure out how to make the middle “newsletter” button be centered when the browser width is narrowed. IOW - At about 740 px the 3 buttons drop down on their own line. At that point I want the middle “newsletter” button be centered. I’ve tried all sorts of things but can’t seem to get it right.

Any help much appreciated.

2

Mark,

Have you tried manipulating the margins of the image or the div within which it is contained?

Something like this

Img
{
Margin-right: auto;
Margin-left: auto;
}

Hope that helps,

Shawn

3

Hi Shawn,

Thanks for your response. Yes I have tried that, it is the way its set up on the link above.

#button-center img {
margin: 0 auto;
text-align: center;
}

Included the text-align for good measure, but that rule does not center the middle button.

any other help much appreciated

4

Hi,

Just set the parent to text-align:center as that will center nested inline elements (in modern browsers).


#buttons {
    text-align: center;
}

text-align:center on the image means nothing as the image is not a container for inline elements. Margin:auto on the image means nothing also as it is an inline element and they aren’t centred with auto margins. You could set the image to display:block and auto margins will work but then that will ruin the right float and it will drop to another line unless you put the floated content before the block content.

5

Paul,

Thank you!! That is exactly what I needed. I was making it so difficult (again) when it was actually easy and simple. Your explanation of why what I was trying doesn’t work was especially helpful and valuable to me. I had tried setting the image to disply:block and had the problem you pointed out. Thanks again!!