WEB Middle of page HTML

Discussion in 'OT Technology' started by nucklearknight, Oct 26, 2008.

  1. nucklearknight

    nucklearknight New Member

    Joined:
    Sep 21, 2008
    Messages:
    367
    Likes Received:
    0
    Location:
    San Francisco, California
    Is there a way I can make something like a picture appear in the middle of the page. By that I mean centered vertically and horizontally? Using HTML?
     
  2. swz

    swz OT Supporter

    Joined:
    May 21, 2003
    Messages:
    25,118
    Likes Received:
    29
    Location:
    Minneapolis
    Code:
    <img src="image.jpg" align="center">
     
  3. Limp_Brisket

    Limp_Brisket New Member

    Joined:
    Jan 2, 2006
    Messages:
    48,422
    Likes Received:
    0
    Location:
    Utah
    Code:
    <img src="image.jpg" style="display: block; margin-left: auto; margin-right: auto;" />
    preferably not inline.
     
  4. Ricky

    Ricky █▄ █▄█ █▄ ▀█▄

    Joined:
    Jun 17, 2005
    Messages:
    38,767
    Likes Received:
    6
    <center>
    </center>

    :mamoru:
     
  5. hurleyint1386

    hurleyint1386 Someone has sand in their vagina

    Joined:
    Jan 6, 2005
    Messages:
    3,687
    Likes Received:
    0
    Location:
    Rochester, NY
    Code:
    <table align="center" width="800">
             <tr valign="middle">
                     <td><img src="oldstandards.jpg" /></td>
             </tr>
    </table>
    
    :mamoru:

    But really, I'd go with Limp_Brisket. Styles is the way to go.
     
  6. nucklearknight

    nucklearknight New Member

    Joined:
    Sep 21, 2008
    Messages:
    367
    Likes Received:
    0
    Location:
    San Francisco, California
    I know how to center it in the middle of the page horizontally. What I'm asking is, is there a way to center it vertically. As in the middle of the screen.
     
  7. benson304

    benson304 OT Supporter

    Joined:
    Dec 26, 2004
    Messages:
    6,672
    Likes Received:
    0
    Location:
    IL
    valign if it's in a table?
     
  8. Mikenotmike

    Mikenotmike

    Joined:
    Jun 1, 2001
    Messages:
    6,244
    Likes Received:
    0
    Location:
    USA
  9. nucklearknight

    nucklearknight New Member

    Joined:
    Sep 21, 2008
    Messages:
    367
    Likes Received:
    0
    Location:
    San Francisco, California
  10. M3Driver

    M3Driver New Member

    Joined:
    Oct 28, 2003
    Messages:
    5,622
    Likes Received:
    0
    Location:
    Minneapolis
    You should learn CSS anyways, its not that big of a jump from html, really
     
  11. Mikenotmike

    Mikenotmike

    Joined:
    Jun 1, 2001
    Messages:
    6,244
    Likes Received:
    0
    Location:
    USA
    just copy the code from the 1st part and save it as index.html, then copy the code from the 2nd part and save it as style.css and put it in the same directory.

    In your index.html look for "Content goes Here" and replace that with your content...

    in the index.html you'll also need to change this

    <link media="screen" type="text/css" rel="stylesheet" href="webtoolkit.clayout.css" />

    to this
    <link media="screen" type="text/css" rel="stylesheet" href="style.css" />
     
  12. carrathanatos

    carrathanatos extremely mean in the meanest way

    Joined:
    Jun 10, 2008
    Messages:
    1,149
    Likes Received:
    0
    Location:
    phx
    if you were 100% deadset on using html, and all you were doing was the picture, i'd do something like this:

    <table width="100%" height="100%">
    <tr>
    <td valign="center" align="center">
    <img src="blah.xxx" />
    </td>
    </tr>
    </table>

    (shrug)

    css would be a little nicer, though. :) you could even still use the table thing above, using this in your css:

    #centerPicture{
    width:100%;
    height:100%;
    }

    #centerPicture td{
    align:center center;
    }

    and then in your html, simply:

    <table id="centerPicture">
    <tr>
    <td>
    <img src="blah.xxx" />
    </td>
    </tr>
    </table>

    all of those terms may not be 100% correct, as i'm doing it off of the top of my head, but it shows how css works. if you want to learn more, i've always used w3schools.com as a great reference guide.
     
  13. nucklearknight

    nucklearknight New Member

    Joined:
    Sep 21, 2008
    Messages:
    367
    Likes Received:
    0
    Location:
    San Francisco, California
    Thanks a lot!
    I had to fiddle with it so I could have some text and a picture centered but it works like a charm!
     

Share This Page