CSS - Website Must Center Vertically! Help!

EDIT: no longer required




All the text is at the top of the menus, how do i get them so they are in the center of the divs ?

Code:

#navbar2 { float:right; position:relative; }
ul.menu2 { list-style-type:none; margin:0; padding:0; }
#navbar2 .leaf2 { width:70px; height:35px; float: left; display: inline; list-style-type:none; display:inline; text-align:center; color:#F7941D; font-weight:bold; font-size:12px; background-color:#2E2E2E; margin-left:8px; border-top-left-radius: 5px; border-top-right-radius: 5px; opacity:0.85; filter:alpha(opacity=85); }
#navbar2 li:hover, #navbar2 li.active { opacity:1; filter:none; }
#navbar2 li a { width:70px; height:35px; display:block; padding-top:3px; }
.leaf2 a { width:70px; }

Code:

  <div id="navbar2">
    <ul class="menu2">
      <li class="leaf2<? if ($activePage=="home") {?> active<? } ?>"><a href="." title="Home">home</a></li>
      <li class="leaf2<? if ($activePage=="item2") {?> active<? } ?>"><a href="2.php" title="2">item<br>2</a></li>
      <li class="leaf2<? if ($activePage=="item3") {?> active<? } ?>"><a href="3.php" title="3">item<br>3</a></li>
      <li class="leaf2<? if ($activePage=="item4") {?> active<? } ?>"><a href="4.php" title="4">item4</a></li>
      <li class="leaf2<? if ($activePage=="item5") {?> active<? } ?>"><a href="5.php" title="5">item5</a></li>
    </ul>
  </div>		

Hi all,

I know there are certain tricks to vertically center texts or images in a div area.

And I have read somewhere there are plans to avoid current complexity compared with tables.

For example, provided I use same CSS...

Code:

div,table{
  width: 250px;
  height: 100px;
  border: 1px solid red;
  text-align: center;
}

...we optain well vertically centered text in this table...

Code:

<table>
  <tr><td>this IS vertically centered</td></tr>
</table>

...but not in this div based one...

Code:

<div>this IS NOT vertically centered</div>

I ask, do you know an easy way to acomplish the same we get with tables?

Thanks!

I know vertical-align works great on one line of text, but I can't get this script to vertically (and horizontally) center two lines of text. What do I need to do change without changing the size of the div?

Code:

echo '<div style="float:left;width:171px;height:96px;text-align:center;display:table-cell;vertical-align:text-middle;background-color:yellow;">';
echo '<h1 >1/35 Scale House</h1>';
echo '</div>';

Hi there,

I have two font sizes: 22px and 12px. However, If I use the 2 sizes next to each other, the large pushes the smaller on down. I tried to use vertical-align: middle to center them vertically, but it didn't work.

How can I center them vertically?

Thanks!

I'm trying to position the image below vertically center and horizontally left to no avail. Its horizontally left but centers the top of the image in the center of the page. What am I doing wrong?

<DIV style="position: absolute; top: 50%; left: 0px; border: none"><img src="images/right.jpg"></img></DIV>

Hi guys, so my css website is centered in safari and mozilla, but not IE

can anybody help me please?
I have tried and tried all sorts of trouble shooting but just cant see where I've gone wrong

If anyone can highlight what I need to change and tell me how to change it would be brilliant!
thanks in advance


HERE IS MY CSS FILE

Code:

@charset "utf-8";
/* CSS Document */

body
{
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}







#container
{
margin: 0 auto; width:850px;
background-image:url(../images/bg.jpg);
background-repeat:repeat-x;
}
#header
{
height:73px;
width:850px;
margin:auto;
}
#logo
{
margin-left:30px;
margin-top:15px;
position:absolute;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
}










#toplinks
{
margin-left:245px;
position:absolute;
width:590px;
color:#33ff99;
}




#toplinks ul
{
list-style-type:none;
margin-top:55px;

}
#toplinks li
{
display:inline;
}
#toplinks a
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-transform:uppercase;
color:#ff33ff;
text-decoration:none;
padding-left:12px;
padding-right:12px;

}
#toplinks a:hover
{
background-image:url(../images/linksbg.jpg);
background-repeat:no-repeat;
background-position:center;
color:#000000;
text-decoration:none;
padding-left:12px;
padding-right:12px;
padding-top:10px;

}
#bodypart
{
width:814px;
margin:auto;
padding-top:15px;

}





#bodypart2
{
width:850px;
margin:auto;
padding-top:40px;

}

	gallery img{
		border:none;
		margin: 0px 4px 4px 0px

	}































#footer
{
width:850px;
margin:auto;
height:60px;
line-height:20px;
}
.footerlinks
{
color:#9933ff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-transform:uppercase;
}
.blackboldtext
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
}

I am using the following code how do I change it so that it would show up in the center of the brower window?

Thanks
Tim
PHP Code:
<div style="position: absolute; left: 0px; z-index: 1; top: 0px; align: center\">
<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" 

codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0

,0\" width=\"544\" height=\"396\" id=\"cardio\" align=\"middle\">
<param name=\"allowScriptAccess\" value=\"sameDomain\" />
<param name=\"movie\" value=\"ads/cardio3.swf\" />
<param name=\"loop\" value=\"false\" />
<param name=\"quality\" value=\"high\" />
<param name=\"wmode\" value=\"transparent\" />
<param name=\"bgcolor\" value=\"#ffffff\" />
<embed src=\"ads/cardio3.swf\" loop=\"false\" quality=\"high\" wmode=\"transparent\" 

bgcolor=\"#ffffff\" width=\"544\" height=\"396\" name=\"cardio\" align=\"middle\" 

allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\" 

pluginspage=\"http://www.macromedia.com/go/getflashplayer\" />
</object>
</div> 

I am aware of how difficult it is to vertically align text etc using pure css but what is hte best way to do it. For example i want to put some text slap bang into the middle of the screen.

Thanks

i'm trying to vertically align a div box (the sign in area) so that it sits on top of this grey (soon to be) navigation bar...i've floated the box to the right...i want it to align to the bottom now...can anyone help me?

------> http:// www . u2station . com / index2.php
and the stylesheet is at: http:// www . u2station . com /movabletype/mt-static/support/themes/u2station/u2station.css

i've basically been trying to radically modify an existing theme that movable type (MT) publishing system created so i can alter it to my specs.

any quick help with this simple css adjustment would be extremely helpful...(otherwise i'm thinking of reverting back to old fashioned tables as a last resort).

Hello,


how do you align vertically a radiobutton with label without using the <br> tag in css?


Code:

      <fieldset>
        <legend>Food</legend>
		<input name="Password" type="radio" id="p" value="" checked="checked" />	
        <label>HTML</label> <br /> 	
		<input name="n1" type="radio" id="p" value="" />
        <label>ASP</label> <br /> 		
		<input name="n1" type="radio" id="p" value="" />        
        <label>Donut</label> <br />	 
		<input name="n1" type="radio" id="p" /> 												
	  </fieldset>

I started out working out a page thinking this *should* do what I want and lo and behold it did work in IE6

http://www.fogcat.co.uk/example/test002.html

But when looking at Firefox it goes all odd. If you remove all the internal "imagediv" div from the "imagechunk" div it nearly works but doesn't algin the "link text" like IE.

I'm told that display:inline-block is not properly supported, which is probably the root of my problems.

What I want a set of divs down the page (the "imagedivs") Each div will contain

An image - but that image will be nested inside a div - it's returned that way from a php function. Images may be of varying height so I can't use pixel values at top margins or anything like that. A link to another page The link should be positioned to the right of the image and aligned vertically with the centre of the image.

This is one of those things that's a doddle with tables, but I'm
trying to train myself to think CSS.

What obvious thing am I over looking?

Code:

+--------------------------------------+
| +----------------+                   |
| | .............. |                   |     ---  <div>
| | :            : |                   |     ...  <img>
| | :            : |   Link here       |
| | :            : |                   |
| | .............. |                   |
| +----------------+                   |
+--------------------------------------+
   
+--------------------------------------+
| +----------------+                   |
| | .............. |                   |    
| | :            : |                   |    
| | :            : |   Link here       |
| | :            : |                   |
| | .............. |                   |
| +----------------+                   |
+--------------------------------------+

Hey everyone, my first time exploring page layouts using CSS and I'm having a few problems.

I have a simple page with separate Header, Navigation and Content divs stacked on top of each other inside of a wrapper div (used to align the three to the center), with another div for the Footer placed below everything else.

Here's how it looks now:

Code:

<html> <head> <title>CSS Divisions</title>  <style type="text/css">  #Wrapper { 	width:800px; 	margin-left:auto; 	margin-right:auto; 	text-align:left; } 	  #Header { 	width:800px; 	height:120px; 	background:#FC6;}  #PNav { 	width:800px; 	height:40px; 	float:left; 	background:#CCC; }  #Content { 	width:800px; 	height:400px; 	float:left; 	overflow:hidden; 	background:#FFC; }  #Footer { 	width:100%; 	height:80px; 	float:left; 	text-align:center; 	background-color:#FC6; }   </style>  </head>  <body>  <div id="Wrapper"> <div id="Header">Header</div> <div id="PNav">Navigation</div> <div id="Content">Content</div> </div> <div id="Footer">Footer</div>   </body> </html>

Ideally what I want is for the page to look exactly how it is, but with the footer stretching from the bottom of the Content div, down to the bottom of the wherever the user's browser has loaded; basically to fill the vertical remainder of the screen.

I've tried setting the footer height to 100%, but that forces the page to extend vertically, and I fumbled around with about a dozen other techniques not really knowing what I was doing, and I've had no luck so far.

Any help would be greatly appreciated!

I have a navigation bar that contains four images (side by side) as well as three text links. They all live within a <div> with the following properties:

#gNav {
width:768px;
height:19px;
text-align:left;
vertical-align:middle;
}


i need for the three text links to line up directly in the middle (vertically) of that <div>.

To achieve this in IE6 and NN+, I attach the following style to the text.

.nookum {
font-size:.9em;
vertical-align: 25%;
color:#FFFFFF;
}





I just learned that the vertical-align property is not recognized by IE5 and IE5.5, so in those versions, the text aligns at the bottom of the <div>.

Anyone know of any workarounds or other methods of vertically aligning text that will work in these two versions of IE?

is it possible to center something vertically inside a container without the use of tables?

I know you use text-align to center horizontally, but what is used for vertical alignment? vertical-align doesn't work.


PHP Code:
<div style="width:100% height:100%; text-align:center;">

    <!-- code goes here -->

</div> 





thanks

goran.

Suppose I have a few tables I want to format vertically. If they are quite wide, chances are simply doing <table id="a">...</table> this will probably happen automatically. Ever, with a wide enough screen they might format horizontally.

To fix this, I could to the following: <table id="a">...</table><br><table id="b">...</table><br><table id="c">...</table> but unfortunately, <br> also adds extra unwanted spacing.

Is there a was to CSS the <br> tag to avoid this, or is there a CSS method to indicate that each successive table should be below the last, not to the right?


Skolem