CSS - Vertically Align Center My Right Div

How would I center an image vertically in a div that has varying height? Normally I would set a line-height and then a vertical-align but the container is of varying size dependent on content . The only way I can think of is to make the image a background and do background-position: center center;

Is that the only workaround?

I have a horizontal nav menu I've created using <ul> and <li> inside a <div>

The problem is I can't get it to vertically center. I tried using padding and/or margin and it didn't work for all browsers.

Here is the html:
Code:

<div class="top_nav">
<ul>
<li><a href='/'>HOME</a></li>
<li><a href='menu'>MENU</a></li>
<li><a href='catering'>CATERING</a></li><li>DETAILS</li>
<li><a href='photos'>PHOTOS</a></li>
</ul>
</div>

and the CSS:
Code:

.top_nav {
	margin: 0 auto 15px auto;
    height: 25px;
    padding: 10px;
	clear: both;
}

.top_nav ul {
	list-style: none;
    text-align: center;
}

.top_nav li {
    padding: 0 25px;
    font-family: "Palatino Linotype", "Times New Roman", Times, serif;
    font-size: 16px;
    font-weight: bold;
    display: inline;
    letter-spacing: 2px;
}

.top_nav li a {
    color: #FFF;
    text-decoration: none;
}
.top_nav li a:hover {
 	text-decoration: underline;
    border-bottom: 3px solid #660000;
}

It stays vertically positioned at the top

OK, I have three images: a top, middle, and bottom that need to align vertically. It should look like a typewriter with paper coming out when said and done. You can see what's wrong at csshore(dot)com Here is the css:

#top {
background:url(images/top.gif) no-repeat;
background-position:50%;
width: 617px;
float:none;
margin:0 auto;
height: 55px;
position: relative;
}

#container {
background:url(images/middle.gif) repeat-y;
background-position:center;
width: 601px;
padding:0;
margin:0 auto;
height: 100%;
position: relative;
min-height:600px;
}

#bottom {
background:url(images/bottom.gif) no-repeat;
background-position:50%;
width: 800px;
height:485px;
margin:0 auto;
position: relative;
}

.center {
background-image:url(images/wood014.jpg);
}

And the html:

<div id="top" class="center"></div>
<div id="container" class="center">When in the course of human events, it becomes necessary for a people to through off the reigns of governement and create a new one. </div>
<div id="bottom" class="center"></div>

Ignore the failed attempt to quote the Declaration of Independence. I have tried everything I know (which admittedly is little) and I can't get them to align.

Thanks in advance.

If you go to the page http://electrojams.com/2010/05/03/n...le-some-chords/ you will see at the top of my post the "social sharing" icons...

They are all embedded JavaScripts, but how can I align them? The Stumbleupon button is lower than the others...

What I'm wanting is for the links to be in the middle of the div vertically. Currently it's at the top. I've tried using vertical-align but that doesn't work. What am I missing here?

asp.net
firefox 3.6.11


CSS
Code:

#headercont
{
	width:auto;
	height:100px;
	text-align:center;
	background-image:url('images/headbg.png');
}
#connav
{	
	vertical-align:middle;
}
#connav ul
{
	position:relative;
	list-style-type:none;
	list-style-image:none;
}
#connav li 
{
	display:inline;
}
#connav ul li a 
{
	text-decoration:none;
	margin: 4px;
	padding: 5px 20px 5px 20px;
	color:#ccff00;
	background-color:#61a003;
}

HTML (inside the body tags)
Code:

<div id="headercont">
	<div id="connav">
		<ul >
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		</ul>
	</div>
</div>   

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 have a div with blue background on the page below. It is is currently displaying horitzontally across the screen, with the images inside doing the same.

I would like to vertically align it along the right side of the page, next to the text (which would be on the left). I'd also like the 'Property Search' within the blue, aligned below the photo of the house.

Can anyone help me out?

I'd like to KNOW how to do it and not have someone just send me an updated style sheet. Thanks.

Styles attached.

http://mulqueenconsulting.com/galese/

Greetings,

I've set an anchor tag to display:block and have set the height to 80px. Unfortunately, it seems I am unable to move the text associated within the hyperlink to the middle (vertically) of the block. Any ideas on how this can be done?

I am designing this page:

theticketsguide.com/sample

Scroll down to where the text reads, "Easy Navigation." I have (more or less) managed to vertically align this text with the image next to it, but I used padding instead of a cleaner, more exact "vertical-align" function. I've tried to put

vertical-align:middle

for the text, but it doesn't do anything. Any help as to what the right solution is to this? I don't want to use padding.

Thanks,

Brandon

zz

I'm stumped. Cannot find a solution here. Is it possible to vertically align a form field inside a DIV in IE6? It works fine everywhere else. (Big shock...)

Thank you for any help you can give. I've resolved to using tables temporarily. Ughhh.

Here's a snippet of the CSS:

Code:

body { background-color: #e2e4d7; background-image: url("../images/fade_top.gif"); background-repeat: repeat-x; margin: 0; padding: 0 }
#wrapper  { margin: 12px auto; width: 796px }
#top    { background-image: url("../images/main_top.gif"); background-repeat: no-repeat; width: 796px; height: 8px; overflow: hidden; vertical-align: bottom }
#main { background-image: url("../images/main_back.gif"); background-repeat: repeat-y; width: 796px; overflow: hidden }
#header { background-image: url("../images/header_back.gif"); background-repeat: no-repeat; width: 796px; height: 262px }
#nav { margin-right: 8px; margin-left: 8px; width: 780px; height: 60px }
#nav ul { list-style-type: none; margin: 0; padding: 0; width: 780px }
#nav li { float: left }
#nav li a { display: block; padding-top: 60px; height: 0; overflow: hidden }
...
#banner { margin-right: 8px; margin-left: 8px; width: 780px; height: 202px; overflow: hidden }
#bannerLeft   { background-image: url("../images/banner_logo.gif"); background-repeat: no-repeat; position: relative; width: 316px; height: 202px; float: left }
#searchBox   { line-height: 53px; text-align: center; position: absolute; top: 149px; width: 316px; height: 53px }
#searchField     { margin: 0; padding: 0; width: 196px; vertical-align: middle }
#searchButton   { margin: 0 0 0 6px; padding: 0; vertical-align: middle }
#bannerRight { background-image: url("../images/banner_photo.jpg"); background-repeat: no-repeat; width: 464px; height: 202px; float: right }
...

And here's a snippet of the HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
		<title></title>
		<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"/>
	</head>

	<body>
		<div id="wrapper">
			<div id="top"></div>
			<div id="main">
				<div id="header">
					<div id="nav">
						<ul>
						...
						</ul>					</div>
					<div id="banner">
						<div id="bannerLeft">
							<form action="http://www.google.com/search" method="get">
<input type="hidden" name="ie" value="UTF-8">
<input type="hidden" name="oe" value="UTF-8">
<input type="hidden" name="domains" value="http://www.whmca.com">
<input type="hidden" name="sitesearch" value="http://www.whmca.com">
<div id="searchBox">
	<input id="searchField" type="text" name="q"><input id="searchButton" name="btnG" type="image" src="images/search_bt.gif" alt="Search" height="14" width="42">
</div>
</form>						</div>
						<div id="bannerRight"></div>
					</div>
				</div>
				<div id="body">
				...
				</div>
			</div>
			<div id="bottom"></div>
			<div id="copyright">
			...
			</div>
		</div>
	</body>

</html>

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!