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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Centering Logo Within Div Wrapper PLEASE HELP!

    Still relatively new to all of this. Trying to learn from others, so please bare with me!

    Here is my site:

    Only A Spark | The Official Site

    (I haven't fixed for IE yet. Sorry. Only working with Safari, Chrome and Opera.)

    Problem: All I'm trying to do is center that .PNG within the gray (Only for reference. Will be transparent in the end) div wrapper. I got it to work a while back with a previous version of the site. And in doing the same the, it isn't working now. Here is the CSS that I'm using for the Logo:

    #logoBar {
    margin: 0 auto;
    width: 1000px;
    padding-top: 72px;
    margin-bottom: 40px;
    }

    My div wrapper is 1000px wide. The padding-top and margin-bottom appear to be working. But it won't center. At all. It just continues to stick to the left side of the div.

    I hope this was clear enough for someone to help out. I really appreciate anything! Thanks!

  • #2
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    913
    Thanks
    76
    Thanked 28 Times in 28 Posts
    Hi, Platinumb.

    When centering something, you must always declare the width before declaring the margin.

    Try this:

    <div id="wrapper">
    <img src="your_image.png" alt="bla" title="bla" id="logo" border="0" />
    </div>

    Now, in your CSS:
    Code:
    #wrapper {//declare any styles for your wrapper}
    
    #logo {width: 80%;
             margin: 0 auto;}
    Hope this helps, without seeing your HTML I can't be 100% sure but I think this should help.

    Kind regards,

    LC.
    Last edited by LearningCoder; 11-02-2012 at 02:27 PM.

  • #3
    Regular Coder
    Join Date
    Mar 2010
    Posts
    198
    Thanks
    78
    Thanked 5 Times in 5 Posts
    Please note that the wrapper around the image should have text-align: center
    In order to make the image go to the center.
    Example:

    html:
    Code:
    <div id="logo">
           <img width="120" height="120" src="image.jpg" alt="" />
    </div>
    css:
    Code:
    #logo {
     text-align: center;
     width: 300px;
    }
    #logo img {
     display: block;
     margin: 0 auto;
    }

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello platinumb,
    It looks like you got your logo image centered.
    You seem to be having trouble with your #newsWrap and #showsWrap though. To place those elements side by side you should be using floats instead of negative margins.

    See about floats here.


    ...
    Just so you're clear about centering, To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto

    This works on images as well. For margin: 0 auto; to center an image you have to use display: block;, since images are inline elements by default.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    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
    •