SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centering an image with CSS

    I have been looking in the book "Designing without tables" for how to center an image using CSS but I cannot find any info anywhere.

    The book states that the float attribute corresponds to the deprecated align attribute associated with the HTML <img> tag. But from my understanding the float attribure is designed to deal with text and images.
    I just want to center an image inside a <div> tag.

    Can I just say <div align=center> or is not kosher anymore? in trying to comply with XHTML and Accessibility guidelines.

    Thanks for your help.

  2. #2
    SitePoint Enthusiast siusai's Avatar
    Join Date
    Jan 2002
    Location
    Richmond, Canada
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use <div style="text-align:center"> to center the image.

  3. #3
    I am obstructing justice. bronze trophy fatnewt's Avatar
    Join Date
    Jul 2002
    Location
    Ottawa, Canada
    Posts
    1,766
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by siusai
    You can use <div style="text-align:center"> to center the image.

    Or to better seperate style and markup:

    (X)HTML:
    Code:
    <div class="theimage">
    CSS:
    Code:
    div.theimage {
        text-align: center;
    }
    (The idea being [basically] that you can style it differently on different media, and that you can re-use this class on any div. )
    Colin Temple [twitter: @cailean]
    Web Analyst at Napkyn


  4. #4
    SitePoint Member
    Join Date
    Oct 2003
    Location
    London
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    *vertical* image alignment ?

    Quote Originally Posted by siusai
    You can use <div style="text-align:center"> to center the image.
    I am still trying to fully understand the layout models, so excuse the ignorance, but what about vertical alignment ?

    What I am trying to acheive it to move from a table structure for my photography site to a pure CSS one, so that I can start to virtualise the site for other people to use.

    What I have are 4:3 aspect ratio thumbnails, either in landscape or portraint, so the dimensions vary from width/height 160/120 to 120/160. I would like to display them a bit like old fashioned slides (on my site) ala: http://photasmagoria.com/gallery/nature/

    I can successfully align them in a 180x180 table cell, but trying to do it with divs and CSS is failing. Horizontal alignment works, but vertical-align is not happening for me :-( I have tried applying the style to all levels of div and the img itself, to no avail.

    Help ?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is a common mistake as vertical-align is only used to align content within a single line (or in a table cell). It will align inline content (text and images) with respect to each other on the same single line.

    It will not align (and is not supposed to) align content within an element. (You can change the element into a cell with display:table-cell but only mozilla understands that.)

    To center the image vertically you can use margin-top to push it down the necessary amount although you will need to do that for each image that is different or if you only have a couple of different sized images then set up classes for each.

    The following code will centre an image (or any element) in the centre of a div, but you do need to know the image size beforehand.
    Code:
    <style type="text/css">
    .outer {
     position:relative;
     width:180px;
     height:180px;
     border:1px solid #000;
    }
    img.first {
     position:absolute;
     display:block;
     left:50%;
     top:50%;
     margin-top:-60px;/* make this half your image height*/
     margin-left:-80px;/*make this half your image width*/
    }
    </style>
    </head>
    <body>
    <div class="outer">
    <img class="first" src="image.gif" width="160" height="120" />
    </div>
    Hope that helps.

    Paul


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
  •