Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: Centering a Div

  1. #1
    Regular Coder
    Join Date
    Aug 2012
    Posts
    109
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Centering a Div

    Hi,

    I have a div at the bottom of every recipe on my website (www.ironwhisk.com) called bottom-sharing (with sharing buttons) that I would like to center.

    I have tried

    Code:
    #bottom-sharing {
      width: 440px;
      margin-left: auto;
    	margin-right: auto;
    padding-top:17px;
    }
    This, however, will not work well. The issue is that depending on the number of shares, the size of the div will increase. Also, on different browsers, it looks slightly off from center.

    Is there a way I can write the css to fix this problem?

    Thanks,

    Ilan

  • #2
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    In my browser the bottom-sharing div is center.

    Firefox 23.0.1
    Thanks!

  • #3
    Regular Coder
    Join Date
    Aug 2012
    Posts
    109
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Sorry, I don't think I was very clear. The problem can be seen here http://www.ironwhisk.com/2012/09/cho...nilla-pudding/ and here's a screenshot: http://pbrd.co/18D4Whk

    The print button is not next to the share button, and the whole thing is not centered.

    On posts that have shares, it is centered.

  • #4
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    The space between the print and share button is reserved for the white box that has the number of shares in it. My mousse becomes a pointer over the white space like the box is missing.

    See here http://www.ironwhisk.com/2012/07/mallow-cookies/

    There is a box with the number 2 pointing towards the share button.
    Thanks!

  • #5
    Regular Coder
    Join Date
    Aug 2012
    Posts
    109
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks for the reply.

    The sharing buttons (facebook, tweet, pin, g+, and share) are all one plugin. The print button is another. I placed the print button there for now, but I would like for it to move depending on how much space the share buttons take up and then center accordingly.

  • #6
    Regular Coder
    Join Date
    Aug 2012
    Posts
    109
    Thanks
    6
    Thanked 0 Times in 0 Posts
    any ideas?

  • #7
    New to the CF scene
    Join Date
    Aug 2013
    Location
    Michigan
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Margins

    Margins have an easy value to input for centering regular content in HTML like divs.

    in this case:

    margin: 0px auto;

    Provided you are using CSS, I'm positive that it is compatible with all modern browsers to my knowledge. If you are scripting in HTML then just put opening and ending <script> & </script> tags around it.

    Hope this helps.

    PS: I assume that you are trying to absolutely center content in your div, if you need other content to be centered as well make sure you place a proper hierarchy of order in your html for each div, or place other things in the div with proper format. Or you can use absolute positioning.

  • #8
    Regular Coder
    Join Date
    Aug 2012
    Posts
    109
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hi, thanks for your reply. That doesn't actually fix my problem though.


  •  

    Tags for this Thread

    Posting Permissions

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