CSS - Center An Element Vertically?

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>		

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!

At http://www.rietgors.tudelft.nl/combo/ you can see what I'm trying to do. I'd like the two elements to have either the same top or bottom, or have both elements centered vertically in the enclosing DIV. Can this be done using just CSS?

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
How do I center element
<ul id="buttons">
in
<div id="alertbox" ?

Code:

<div id="alertbox" style="background-color:#99CC99">
<h3 id="alerttitle"><span>DO YOU WANT TO CONTINUE ?</span></h3>
	<div id="alertcontent">
		<ul id="buttons">
			<li><a href="yes.php">YES</a></li>&nbsp;<li><a href="no.php">NO</a></li>
		</ul>
	</div>    
</div>  

<style type="text/css">
#alertbox {
text-align: center;
list-style-type: none;
padding: .2em 0;
}

#alertbox li { display: inline;  }

#alertbox a {
padding: 5px 20px .3em 20px;
border: 1px solid #cccccc;
}
</style>

Thank you.

hey guys,

I just have a short question about css:

How to center an element?


greetings and thx in advance

PS: I tried to use auto but this does not function...

Hi,

My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner).

Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page.

I have tried various approaches and read up on positioning but so far have not been able to do it using css.

Any help is much appreciated.

Jim

I have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover.

Here is an example:


Code:

<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>

.link a { some link height }

.link a span { display: none; }

.link a:hover span {
  position: abolute;
  top: (some link height * the number of links);
  background-image: (some image url)
  width: (image width)
  height: (image height)
}

Appearance:

------
Link1
Link2
Link3
Link4
-------
-------
Rollover Image to appear here
-------

The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed.
IE
------
Link1
sublink1
sublink2
Link2
Link3
Link4
-------

will break my scheme.


Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang?

If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that.

thanks.

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> 

Can anyone explain the difference between the two? For example, what is the difference between:

this:
element element {}
div p { }

and this:
element > element { }
div > p { }

I don't understand it and have not found an explanation in tireless searching. Thx!

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).

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!

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>