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

    Trouble centering 1 of 3 images

    Hi,

    This is my first post and I'm having a little trouble with 3 images at the top of a webpage. I've got 3 images, I want one in the top left corner, one in the top right, and one in the centre.

    The two corner ones are fine, it's just the one in between the two that I'm having difficulty with.

    Here's my HTML:

    Code:
    <img class="corner" src="truck1.png" align="left" width="216" height="154" />
    <img class="logo" src="logotransparent.png" align="center" />
    <img class="corner" src="truck2.png" align="right" width="216" height="154" />
    And the corresponding CSS:

    Code:
    .logo {
        display: inline;
        margin: 0 auto;
    }
    
    .corner {
        display: inline;
    }
    It's the logo classed img that I cant get centered, it's at the left, right next to the first corner image.

    Any help would be appreciated.

    Thanks,

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,038
    Thanks
    23
    Thanked 589 Times in 588 Posts
    This is no longer accepted
    Code:
    align="center"
    or any align= as an attribute. We need to use CSS and floats.
    Because we have two images, it is better to have two IDs(unless you are going to have other things floated, then class is OK. BTW, I did leave it as class lcorner and rcorner)

    To center an image we again (who'da thought) use CSS. We do two things to it. First display:block; and then margin: 0 auto;

    When I did this the center image is a little lower then the corner images so I added position:relative; and top: -25px; to bring it up. You need to play with the top: to get it exact.

    Remember to clear the floats for what comes next.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>title</title>
    <style type="text/css">
    .logo {
    	display:block;
    	margin: 0 auto;
    	position:relative;
    	top: -25px;
    }
    
    .lcorner {
    	float:left;
    }
    .rcorner {
    	float:right;
    }
    </style>
    </head>
    <body>
    
    <img class="lcorner" src="truck1.png" width="216" height="154">
    <img class="rcorner" src="truck2.png" width="216" height="154">
    <img class="logo" src="logotransparent.png" width="216" height="154" ><!-- IMAGES NEED WIDTH & HEIGHT  -->
    
    </body>
    </html>
    Evolution - The non-random survival of random variants.


  •  

    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
    •