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 Coder
    Join Date
    Oct 2011
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    center an image in CSS

    Hi all,
    I am new to Css ,I try to ix a image in center,but it doesn' seems to work.

    main.css
    -----------
    Code:
    img.center {
    display: block;   
    margin-left: auto;  
    margin-right: auto; 
    }
    and index.php
    Code:
    <?php
    echo 'Hallo';
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <LINK REL=StyleSheet HREF="main.css" TYPE="text/css" MEDIA=screen></link>
    <img src="image.png" alt="Suni" class="center" />
    It doesn't work in IE but in firefox it works ,what can i do?

    thankyou all.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello minazfath,
    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


    You are right in making your image display: block; as well.
    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


  •  

    Posting Permissions

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