PDA

View Full Version : vertically aligning image with css...



rr299
Aug 22nd, 2007, 10:20 AM
Hi I hope someone can help me with this. I have been searching for days on this and haven't found a solution which sorts out the problem. I want to vertically align a flash file (would be the same as an image) in the browser window using css, ideally in a standards compliant way. I have managed to sort this out so it works in FireFox but it isn't working in IE.

The css i currently have is...




#centerVert1{
top: 0; left: 0; width: 100%; height: 90%;
margin: -10px 0 0 0 ;
position: fixed;
display: table;
}


#centerVert2{
display: table-cell;
vertical-align:middle;
}

#wrapper{
width:785px;
margin: 0 auto;
padding: 10px 10px 10px 10px;
background-color:#ffffff;
display:block;
}

Where I have them ordered in my html...
<div id="centerVert1">
<div id="centerVert2">
<div id="wrapper">
FLASH HERE

Any suggestions or help pointing me to a tutorial would be great.
Thanks

effpeetee
Aug 22nd, 2007, 11:13 AM
http://www.w3schools.com/css/tryit.asp?filename=trycss_vertical-align

You could try this.

Frank

rr299
Aug 22nd, 2007, 11:33 AM
Thanks for the reply, but that looks like it is specifically around text. I just want a flash movie (or image) and nothing else...

effpeetee
Aug 22nd, 2007, 11:47 AM
http://www.w3.org/Style/Examples/007/center

How about this.

Frank

rr299
Aug 22nd, 2007, 11:52 AM
Yeah I also tried that one ;)
This link looks like what I am after...

http://www.w3.org/Style/Examples/007/center-example.html

unfortunately its not working in IE and I don't know enough about the whole thing to work round it. Any ideas?

effpeetee
Aug 22nd, 2007, 11:59 AM
I'm not a good coder, I just look around for likely sites.

I usually go to Google;
I typed "vertically center an image in IE"

Try this one

http://www.webmasterworld.com/forum83/8545.htm

Frank

ahallicks
Aug 22nd, 2007, 02:47 PM
How's about this one (http://pipwerks.com/journal/2007/05/08/vertical-centering-without-using-tables/)? Looks like you are using the same method, but this has hacks for IE a little further down that should help you sort out the problems

Arbitrator
Aug 22nd, 2007, 04:36 PM
I want to vertically align a flash file (would be the same as an image) in the browser window using css, ideally in a standards compliant way.See http://www.jsgp.us/demos/cf121944.html. How itís done should be clear enough if you have a clue how absolute positioning and negative margins work. Note that it only works when you know the height of what you want to center though.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-Latn">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo for CodingForums.com Thread 121944</title>
<meta name="Author" content="Patrick Garies">
<meta name="Created" content="2007-08-22">
<meta name="Revised" content="2007-08-22">
<style type="text/css" media="all">
* { margin: 0; padding: 0; }
html { background: white; color: black; font: 16px sans-serif; }
div { position: absolute; top: 50%; left: 50%; width: 500px; height: 500px; margin: -250px 0 0 -250px; background: beige; text-align: center; line-height: 500px; } /* Specify negative margins that are half of the width and height of the element. */
</style>

</head>
<body>

<div>demo text</div>

</body>
</html>


The css i currently have is...




#centerVert1{
top: 0; left: 0; width: 100%; height: 90%;
margin: -10px 0 0 0 ;
position: fixed;
display: table;
}


#centerVert2{
display: table-cell;
vertical-align:middle;
}

#wrapper{
width:785px;
margin: 0 auto;
padding: 10px 10px 10px 10px;
background-color:#ffffff;
display:block;
}

Where I have them ordered in my html...
<div id="centerVert1">
<div id="centerVert2">
<div id="wrapper">
FLASH HERE

Any suggestions[Ö]Next time that you use CSS tables to center a layout, keep in mind that those nested div elements are not necessary. The following code suffices:


html { display: table; width: 100%; height: 100%; }
body { display: table-cell; vertical-align: middle; }