✔ Liste in Div zentrieren?

whiterussian · 23. Januar 2006

Ich würde gern in einem Div eine horizontale Liste vertikal zentrieren. (Navi)
Die Liste an sich horizontal geht ja ganz ordentlich

Code:

ul {
	list-style-type : none;
	margin: 0;
	padding: 0;

}

li {
	float: left;
	margin: 0;
	text-align: center;

}

Nur schaff ichs nicht, die "Liste" in einem "Div" vertikal zu zentrieren!?
Mit der Eigenschaft

Code:

vertical-align: middle;

bringt das nicht das gewünschte Ergebnis - bzw. gar keins.

Idee?

Maik · 23. Januar 2006

Lösungsbeispiel für eine vertikal-zentrierte Liste in einem DIV mit Hilfe der CSS-Eigenschaft line-height:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
div#navigation
{
line-height: 60px;
text-align: center;
border: 1px solid #000000;
}

ul
{
list-style-type: none;
margin: 0;
padding: 0;
}

li
{
display: inline;
margin: 0;
text-align: center;
}
-->
</style>

</head>
<body>

<div id="navigation">
     <ul>
         <li><a href="#">link 1</a></li>
         <li><a href="#">link 2</a></li>
         <li><a href="#">link 3</a></li>
     </ul>
</div>

</body>
</html>

✔ Liste in Div zentrieren?

whiterussian

Erfahrenes Mitglied

Maik

Neue Beiträge