TECH Middle of page HTML

[nucklearknight]

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?

 

[swz]

<img src="image.jpg" align="center">

 

[Limp_Brisket]

<img src="image.jpg" style="display: block; margin-left: auto; margin-right: auto;" />

preferably not inline.

 

[Ricky]

<center>
</center>

 

[hurleyint1386]

<center>
</center>

<table align="center" width="800">
         <tr valign="middle">
                 <td><img src="oldstandards.jpg" /></td>
         </tr>
</table>

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

 

[nucklearknight]

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.

 

[benson304]

valign if it's in a table?

 

[Mikenotmike]

Like this?
http://www.webtoolkit.info/css-centered-layout.html

 

[nucklearknight]

Like this?
http://www.webtoolkit.info/css-centered-layout.html

Exactly like that!

Do I need to know CSS or is there a way to do it with HTML?

 

[M3Driver]

You should learn CSS anyways, its not that big of a jump from html, really

 

[Mikenotmike]

Exactly like that!

Do I need to know CSS or is there a way to do it with HTML?

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" />

 

[carrathanatos]

Exactly like that!

Do I need to know CSS or is there a way to do it with HTML?

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.

 

[nucklearknight]

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)

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!