SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting a logo to sit in the middle [responsive design]

    Hi

    I have a logo which sits on the top left of my container in desktop to large viewports.


    Code:
    <a href="../index.php" class="active"><img src="../images/logo.png" width="200" height="35" alt="Logo" class="logo"></a>
    Code:
            img.logo {
    	margin-top:10px;
    	margin-bottom:10px;
    	border:none;
            }

    I want to use media queries to centre this logo when viewed in phone / tablet sized viewports.

    How would I do this? I have a workaround at the moment which is swaps out the img.logo for a roughly centred div (not quite right), it's certainly not ideal.

    Any help would be much appreciated on best practice.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    See the following pen for a demo, since you know the width of the image you can simply use a left offset then pull it back with a margin which will work in any browser.

    http://codepen.io/ChrisUpjohn/pen/EBJIj
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,200
    Mentioned
    105 Post(s)
    Tagged
    1 Thread(s)
    An alternative would be to just set the img.logo to display as block (images display inline as default) and use the auto margins. This allows you to use different size logos depending on your display, and you don't need to worry about the image size.

    img.logo { display:block; margin: 10px auto; border: none; }
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Yes, and if that image is in a block level container like a div, you could also set the div to width: 100% and text-align: center, which should also center the image.

    SO many options.

  5. #5
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DaveMaxwell View Post
    An alternative would be to just set the img.logo to display as block (images display inline as default) and use the auto margins. This allows you to use different size logos depending on your display, and you don't need to worry about the image size.

    img.logo { display:block; margin: 10px auto; border: none; }

    of course! thanks

    I had it set to float left in my large viewport window. Sorted now!


    Cheers


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
  •