Results 1 to 3 of 3

Thread: Vertically centering an image

  1. #1
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,363
    Thanks
    31
    Thanked 139 Times in 134 Posts
    Blog Entries
    32

    Default Vertically centering an image

    Using jquery we can put an image having NO VALUE FOR ITS HEIGHT in the vertical middle of the window. Example:
    <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
    function vert_middle()
    {
    $('#funes').css('top', '50%');
    $('#funes').css('margin-top', -$('#funes').height()/2+'px')
    }
    window.onload=vert_middle
    window.onresize=vert_middle
    </script>
    </head>

    <body>
    <img id="funes" src="http://upload.wikimedia.org/wikipedia/commons/5/51/Louis_de_funes_1978_ws_1-zoom-frameless.jpg" style="position: absolute; left: 45%; width: 10% ">
    </body>
    Does anyone know if this is possible with css alone?
    Thanks.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,982
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    With a table and css only:

    HTML Code:
    <!DOCTYPE html>
    <head>
    <style type="text/css">
    html, body, table, td {width: 100%; height: 100%; text-align: center; overflow: hidden; margin: 0; padding: 0;}
    </style>
     </head>
    
     <body>
     <table>
    <tr>
    <td><img id="funes" src="http://upload.wikimedia.org/wikipedia/commons/5/51/Louis_de_funes_1978_ws_1-zoom-frameless.jpg" style="width: 10%;"></td>
    </tr>
    </table>
    
     </body>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    molendijk (11-17-2013)

  4. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,363
    Thanks
    31
    Thanked 139 Times in 134 Posts
    Blog Entries
    32

    Default

    Of course, tables!
    I didn't want overflow: hidden, so I changed it to this, which seems to work fine.
    <!DOCTYPE html>
    <head><meta charset="utf-8"> <title>&nbsp;</title></head>
    <body>

    <!-- Replace 'fixed' with 'absolute' if you want the image(s) to be scrollable. Experiment with the values for left and width -->
    <table style="position: fixed; left: 45%; top: 0; width: 10%; height: 100%; margin: 0; padding: 0; ">
    <tr>
    <td>
    <img alt="" src="http://upload.wikimedia.org/wikipedia/commons/5/51/Louis_de_funes_1978_ws_1-zoom-frameless.jpg" style="width: 100%;"><br>
    <img alt="" src="http://upload.wikimedia.org/wikipedia/commons/5/51/Louis_de_funes_1978_ws_1-zoom-frameless.jpg" style="width: 140%; margin-left: -20%"><br>
    <img alt="" src="http://upload.wikimedia.org/wikipedia/commons/5/51/Louis_de_funes_1978_ws_1-zoom-frameless.jpg" style="width: 80%; margin-left: 10%"><br>
    </td>
    </tr>
    </table>

    funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<b r>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes <br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>fun es<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>funes<br>f unes<br>funes<br>funes<br>funes<br>

    </body></html>

Similar Threads

  1. Vertically centering links in a nav menu
    By keyboard in forum CSS
    Replies: 2
    Last Post: 08-15-2013, 05:18 AM
  2. Replies: 3
    Last Post: 08-30-2010, 09:44 AM
  3. centering an image vertically within a <div>
    By MonteChristo in forum HTML
    Replies: 2
    Last Post: 03-05-2008, 09:55 AM
  4. Replies: 5
    Last Post: 09-06-2007, 02:55 AM
  5. Center An Image Vertically & Horizontally
    By tomyknoker in forum CSS
    Replies: 1
    Last Post: 10-03-2006, 11:39 AM

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
  •