SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image centering in responsive design

    I have a one page responsive design.
    http://www.openrangeimaging.com/Test...yme/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. #2
    SitePoint Addict bronze trophy
    Join Date
    Mar 2013
    Location
    Oneonta, NY
    Posts
    307
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

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

    Code:
    #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. #5
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •