<li>/<ul> Element in <div> vertikal zentrieren!

**flipmode** · 06.05.2011 15:51

Hallo,

immer wieder hab ich Probleme, Elemente vertikal in einem Container zu zentrieren - sobald das ganze in der höhre variabel bleiben soll.

Mein Beispielcode:

Code:

<div class="Container1">
   <div class="Container2">
    <ul class="ar_left">
      <li class="details_list pcs">
        <span class="details_pcs">
        {$Position->nAnzahl|replace_delim} {$Position->Artikel->cEinheit}
        </span>
      </li>

<li class="details_list art_img">
<a href="{$Position->Artikel->cURL}" title="{$Position->cName[$smarty.session.cISOSprache]}">
<img src="{$Position->Artikel->cVorschaubild}" alt="{$Position->cName[$smarty.session.cISOSprache]}" width="60" class="image">
        </a>
     </li>
   </ul>
  </div>
</div>

CSS

Code:

.Container1 {
width: 650px;
}

.Container2 {
float: left;
display: block;
}

.ar_left {
display: block;
float: left;
padding: 0;
margin: 0;
}

.details_pcs {
vertical-align: middle;
}
.art_img {
list-style: none;
float: left;
}
.details_list {
list-style: none;
float: left;
display: inline-block;
}

So sollte es aussehen, bzw. sieht es aus -->

Soweit ich das in einigen Themen hier herauslesen konnte, liegt es an den floats, allerdings fehlt mir der Lösungsansatz und wäre daher für einen Tipp sehr dankbar.

**zehsn** · 10.05.2011 10:25

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>VERTICAL ALIGN TEST</title>
	</head>
	<style type="text/css">
	#theList {
		background: #ccc;
		margin: 0;
		padding: 0;
	}
	#theList li {
		background: #ededed;
		border: 1px solid #f4f4f4;
		display:-moz-inline-stack;
		display:inline-block;
		zoom:1;
		*display:inline;
		vertical-align: middle;
	}
	</style>
	<body>
	<ul id="theList">
	<li><span>Lorem ipsum dolor sit amet.</span></li>
	<li><img src="http://www.down-under-shop.de/dus/startseite/animalinfo/fotos/koala1.JPG" alt="Koala"/></li>
	<li><h5>Lorem ipsum</h5><p>dolor sit amet bla bla bla bla bla bla</p></li>
	</ul>	
	</body>
</html>

**flipmode** · 12.05.2011 09:47

Hallo,

danke - das klappt einwandfrei

Grüße

Jürgen

zur Startseite vom TP

Thema: <li>/<ul> Element in <div> vertikal zentrieren!

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

<li>/<ul> Element in <div> vertikal zentrieren!

Ähnliche Themen

DIV vertikal zentrieren

<h1> in <div> vertikal zentrieren

text in <ul> vertikal zentrieren

Vertikal zentrieren ... ?

Aktive Benutzer

Aktive Benutzer