Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Center Image Verically & Horizonally

  1. #1
    Join Date
    Feb 2009
    Posts
    159
    Thanks
    60
    Thanked 3 Times in 3 Posts

    Question Center Image Verically & Horizonally

    I want to center one image on a page perfectly in the center of the page.
    I do not want it to be as a background though because I need to have it as a active link to enter my site? Dose anyone know how I can do this?

    Thanks in advance.


    I want to center it verically and horizontally.

    For Any One who has this problem in the future the CSS code is as follows:
    * {margin:0;padding:0}
    html,body{height:100%}
    #wrapper{ height:100%;
    width:100%;
    display:table;
    vertical-align:middle;}
    #outer{ display:table-cell;
    vertical-align:middle}

    #formwrap{position:relative;
    left:50%;
    float:left;}

    #form1{
    position:relative;
    left:-50%;}

    View my front page for an example on how to use it : http://www.robinsden.110mb.com
    Last edited by robin9000; 02-07-2009 at 02:00 PM.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Code:
    <a href="index.php"><img src="image.png" style="border: none" /></a>
    How 'bout that.
    Jeremy | jfein.net

  3. #3
    Join Date
    Feb 2009
    Posts
    159
    Thanks
    60
    Thanked 3 Times in 3 Posts

    Question

    What's up this the php part. I don't know php?

  4. #4
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    If you have make a div with the width of the page and then just use:

    Depends whether your page is the full width or not:

    Code:
    #mydiv{
    width:100% 
    text-align:center;
    border:none;
    }
    Then just put:

    Code:
    <div id="mydiv"><a href="mypage.html"><img src="image.jpg" alt="myimage"></a></div>

  5. The Following User Says Thank You to Schmoopy For This Useful Post:

    robin9000 (02-06-2009)

  6. #5
    Join Date
    Feb 2009
    Posts
    159
    Thanks
    60
    Thanked 3 Times in 3 Posts

    Default

    Quote Originally Posted by Schmoopy View Post
    If you have make a div with the width of the page and then just use:

    Depends whether your page is the full width or not:

    Code:
    #mydiv{
    width:100% 
    text-align:center;
    border:none;
    }
    Then just put:

    Code:
    <div id="mydiv"><a href="mypage.html"><img src="image.jpg" alt="myimage"></a></div>
    My page that I just did with the code you provided is here:
    http://www.robinsden.110mb.com/

    As you will see I have it now ceter on the page but still not in the middle of the page???

  7. #6
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    There was no PHP in it. That was a link to a page. Schmoopy, make sure you give your image no border.
    Jeremy | jfein.net

  8. #7
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    Quote Originally Posted by robin9000 View Post
    My page that I just did with the code you provided is here:
    http://www.robinsden.110mb.com/

    As you will see I have it now ceter on the page but still not in the middle of the page???
    Looks in the middle to me =/ (If you mean the big enter image, it's scaling when I resize the browser and looks dead centre to me).

    @Nile - Ok, well add:

    Code:
    #mydiv a img{
    border:none;
    }

  9. The Following User Says Thank You to Schmoopy For This Useful Post:

    robin9000 (02-06-2009)

  10. #8
    Join Date
    Feb 2009
    Posts
    159
    Thanks
    60
    Thanked 3 Times in 3 Posts

    Default

    Yes it's in the center but I want to make it dead middle of the page, sorry if I confused you. Sometimes I guess it's hard to know what someone wants. LOL.

    If I were to draw a imaginary X on the page the middle of that X is where I want the image to be.
    Last edited by robin9000; 02-06-2009 at 09:31 PM.

  11. #9
    Join Date
    Sep 2008
    Posts
    48
    Thanks
    0
    Thanked 4 Times in 4 Posts

  12. The Following User Says Thank You to the penguin For This Useful Post:

    robin9000 (02-06-2009)

  13. #10
    Join Date
    Feb 2009
    Posts
    159
    Thanks
    60
    Thanked 3 Times in 3 Posts

    Exclamation Should work now but dosen't work in brower???

    I have just redone my page coding and in theory it should work now and dose on dreamweavers design view but not in the browser

    Why dose this code not seem to work in the brower.

    http://www.robinsden.110mb.com/index.html

    body {
    margin: 0;
    padding: 0;
    background-color: #000000;
    }

    #Imagecenter{
    width:100%;
    text-align:center;
    border:none;
    max-height: 50%;
    margin: 25% auto;
    }

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
  •