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 12 of 12
  1. #1
    Regular Coder
    Join Date
    Dec 2012
    Posts
    121
    Thanks
    15
    Thanked 1 Time in 1 Post

    Trouble centering img inside div

    As the subject says I am trying to center a img within a div.

    I am trying to make a website responsive and I have set the #logo div to be 100% width but I need the image to always sit in the center so it looks nice.

    Can't seem to figure this out, can someone advice me of the css? The code atm is as follows:-

    Code:
    <!-- Website Logo Place -->
    				<div id="logo">
                                    	<a href="http://www" class="logo"  title="">                                    	
                                        	                                        <img src="http://www" alt="">
                                                                                	<span class="tagline"></span>
                                    	</a>                                          												
                                    </div><!--Logo-->
    css is:-

    Code:
    #logo{float:left; width:354px; height:200px; background-color:#CCC;}
    #header .logo { position: absolute; top: 0px; left: 13px; }
    #header .logo img { display: block; margin: 0px 0px 12px; }
    #header .logo .tagline { font-size: 12px; color: #b0b7b9; line-height: 14px; }
    Thanks in advance :-)

  • #2
    Regular Coder patryk's Avatar
    Join Date
    Oct 2012
    Location
    /dev/couch
    Posts
    398
    Thanks
    2
    Thanked 64 Times in 64 Posts
    add text-align:center to logo div
    that should center link with image

    -------------------------------------------------------------------------------
    "Real Programmers can write assembly code in any language" - Larry Wall

  • #3
    Regular Coder
    Join Date
    Dec 2012
    Posts
    121
    Thanks
    15
    Thanked 1 Time in 1 Post
    Ok so I added

    Code:
    #logo{width:100%; margin:0 auto; text-align:center;}
    to my media query css and it's still not working

  • #4
    Regular Coder patryk's Avatar
    Join Date
    Oct 2012
    Location
    /dev/couch
    Posts
    398
    Thanks
    2
    Thanked 64 Times in 64 Posts
    your link is set to float:left
    that's overriding stuff
    check this: http://freedockstar.com/glob

    -------------------------------------------------------------------------------
    "Real Programmers can write assembly code in any language" - Larry Wall

  • #5
    Regular Coder
    Join Date
    Dec 2012
    Posts
    121
    Thanks
    15
    Thanked 1 Time in 1 Post
    I thought the div was set to float left, I didn't think this would effect the content also?

  • #6
    Regular Coder patryk's Avatar
    Join Date
    Oct 2012
    Location
    /dev/couch
    Posts
    398
    Thanks
    2
    Thanked 64 Times in 64 Posts
    oh man sorry. my bad.
    i reed it wrong.
    try removing #header .logo img { display: block; margin: 0px 0px 12px; }

    -------------------------------------------------------------------------------
    "Real Programmers can write assembly code in any language" - Larry Wall

  • #7
    Regular Coder
    Join Date
    Dec 2012
    Posts
    121
    Thanks
    15
    Thanked 1 Time in 1 Post
    No worries. I removed it and it didn't make any difference sorry

  • #8
    Regular Coder patryk's Avatar
    Join Date
    Oct 2012
    Location
    /dev/couch
    Posts
    398
    Thanks
    2
    Thanked 64 Times in 64 Posts
    hey but what's header? i don't see anything with that id in your code

    -------------------------------------------------------------------------------
    "Real Programmers can write assembly code in any language" - Larry Wall

  • #9
    Regular Coder
    Join Date
    Dec 2012
    Posts
    121
    Thanks
    15
    Thanked 1 Time in 1 Post
    To be honest the responsiveness on the whole header including the logo image which I mentioned above is not working well. It's from a theme my client purchased and has asked me to make amendments to.

    I am very new to all this thou so I am a bit stuck

  • #10
    Regular Coder patryk's Avatar
    Join Date
    Oct 2012
    Location
    /dev/couch
    Posts
    398
    Thanks
    2
    Thanked 64 Times in 64 Posts
    is this what you are after?
    http://freedockstar.com/glob.php

    -------------------------------------------------------------------------------
    "Real Programmers can write assembly code in any language" - Larry Wall

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello charlyanderson,
    You'll need to re-think these bits -
    Code:
    #header .logo { position: absolute; top: 0px; left: 13px; }
    #header .logo img { display: block; margin: 0px 0px 12px; }
    Your image can be centered with left/right margins set to auto because you've made it a block level element.
    To use patryk's suggestion of text-align: center; you would need to remove the block level so the image could default back to inline.

    For either of those suggestions, you probably don't want your anchor to be absolutely positioned.

    You are correct in thinking that a float applied to the parent element does not affect it's contents.

    Look at it like this once -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 0 auto;
    	padding: 0 0 400px;
    	background: #999;
    }
    #logo {
    	overflow: auto; 
    	background: #ccc;
    }
    #logo a {
    	margin: 0 0 12px 13px;
    	overflow: auto;
    	display: block;
    }
    #logo .logo img{
    	display: block; /*for demo because I don't have your image*/
    	float: left;
    	background: #f00; /*demo only*/
    }
    span.tagline {
    	margin: 50px 0 0 20px;
    	font-size: 1.2em;
    	color: #b0b7b9;
    }
    </style>
    </head>
    <body>
    	<div id="container">
    		<div id="logo">
    			<a href="#" class="logo">
    				<img src="#" alt="description" width="354" height="200" />
    				<span class="tagline">some words for a tagline</span>
    			</a> 
    		<!--end logo--></div>
    	<!--end container--></div>
    </body>
    </html>
    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

  • Users who have thanked Excavator for this post:

    charlyanderson (04-15-2013)

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Or, since you're using the new HTML5 DocType, here it is again with some of the new elements that come with that spec -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 0 auto;
    	padding: 0 0 400px;
    	background: #999;
    }
    figure#logo {
    	overflow: auto; 
    	background: #ccc;
    	/*has a margin: 16px 40px; by default*/
    }
    figure#logo a {
    	margin: 0 0 12px 13px;
    	overflow: auto;
    	display: block;
    }
    a.logo img{
    	display: block; /*for demo because I don't have your image*/
    	float: left;
    	background: #f00; /*demo only*/
    }
    figcaption {
    	margin: 50px 0 0 20px;
    	font-size: 1.2em;
    	color: #b0b7b9;
    }
    </style>
    </head>
    <body>
    	<div id="container">
    		<figure id="logo">
    			<a href="#" class="logo">
    				<img src="#" alt="description" width="354" height="200" />
    				<figcaption>some words for a tagline</figcaption>
    			</a> 
    		<!--end logo--></figure>
    	<!--end container--></div>
    </body>
    </html>
    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

  • Users who have thanked Excavator for this post:

    charlyanderson (04-15-2013)


  •  

    Posting Permissions

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