ComputerBase Menü
Aktuelles

Text der Listenelemente vertikal zentrieren

nierewa

nierewa

Lt. Junior Grade
Registriert
Juni 2008
Beiträge
417
Hallo.
Ich hab eine Liste.
Der Listenpunkt 1 geht dabei über zwei Zeilen.

Bsp.:

Listenpunkt1 Listenpunkt2 Listenpunkt 3
über 2 Zeilen

Wie bekomme ich es hin, das der Text vertical zentriert ist und nicht oben ausgerichtet?

display:table-cell;vertical-align:middle -> funktioniert im IE7 nicht!
 
Sorry, falls Du aufgrund diesem [meinem] Foreneintrag Zeit verloren hast.

Richtig war der Code im Beitrag von S.o.T.

Geändert ist im nachfolgenden Beispiel gegenüber der OV ".gallery li a {display:block;}" zu ".gallery li a {display:inline;}".

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style type="text/css"> 

/*<![CDATA[*/
 li.c1        {list-style:none}
.gallery      {margin:auto; width:600px;} 
.gallery li   {display:inline;} 
.gallery li a {display:inline; margin:10px;}
/*]]>*/

</style>

</head><body>

<div class="gallery">

<ul>
<li><a href="#"><img alt="Bla" src="bla.jpg"/>123456789</a></li>
<li><a href="#"><img alt="Bla" src="bla.jpg"/>123456789</a></li>
<li><a href="#"><img alt="Bla" src="bla.jpg"/>123456789</a></li>
<li class="c1">usw.</li>

</ul>
</div>
</body></html>

Ps. Dank auch an xxx für die PN vom 30.06.2010 [18:50] - Betreff: display: table(-cell) - mit Hinweis auf den Fehler.
Hab mich erst jetzt wieder eingeloggt.

GF
 
Das ist leider nicht das was ich meine.

Es soll so aussehen:

Listenpunkt1
Listenpunkt2 Listenpunkt 3
über 2 Zeilen


Narürlich ist der Abstand zwischen den Zeile normal.
Hier nur so groß wegen der besseren Darstellung.
 
Zitat: "Natürlich ist der Abstand zwischen den Zeilen normal.
Hier nur so groß wegen der besseren Darstellung."

Versteh ich nicht. Versuchs trotzdem mal hiermit:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>

<style type="text/css"> 

/*<![CDATA[*/
body          {font-family:verdana;}
a             {text-decoration:none; padding-left:20px;}
li            {list-style:none; line-height:20px;}
.def          {margin:auto; width:600px;} 

/*]]>*/

</style>

</head><body>

<div class="def">

<ul>

<li><a href="#">Listenpunkt 1</a></li>
<li><a href="#">Listenpunkt 2</a><a href="#">Listenpunkt 3</a></li>

</ul>

</div>
</body></html>

GF
 
Zuletzt bearbeitet:
Morgen :D
In meinem vorherigen Post hat es die Zeilen verschoben.
Da kann man ja nicht sehen was ich meine.

HTML: 
                 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>

<style type="text/css">

/*<![CDATA[*/
body          {font-family:verdana;}
a             {text-decoration:none; padding-left:20px;}
li            {display:inline;list-style:none; line-height:20px;}
.def          {margin:auto; width:600px;}

/*]]>*/

</style>

</head><body>

<div class="def">

<ul>

<li><a href="#">Punkt 1<br />über 2 Zeilen</a></li>
<li><a href="#">Listenpunkt 2</a></li>
<li><a href="#">Listenpunkt 3</a></li>

</ul>

</div>
</body></html>

Der Text der Listenelemente soll aber vertical zentriert sein.
also so:
Code: 
Listenpunkt1
                           Listenpunkt 2              Listenpunkt 3
über 2 Zeilen
Ergänzung ()

Mal ein link zu ner Beispielseite:
http://www.star-wars.de.vu/test
 
Der Code der Beispielseite "http://www.star-wars.de.vu/test" wäre folgender:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>

<title>Testseite</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />

<link href="style.css" type="text/css" rel="stylesheet" />
<!--[if lte IE 7]>
       <link rel="Stylesheet" href="sides/ie.css" type="text/css" />
    <![endif]-->
	
</head>
<body>
<div id="leiste">
<ul id="punkte">
<li id="anfang">&nbsp;</li>

<li class="eintrag"><a href="#">Gesellschaftsbau</a></li>
<li class="space">&nbsp;</li>
<li class="eintrag"><a href="#">Industriebau</a></li>
<li class="space">&nbsp;</li>
<li class="eintrag"><a href="#">St&uuml;tzmauern und Br&uuml;cken</a></li>
<li class="space">&nbsp;</li>
<li class="eintrag"><a href="#">Reko</a></li>
<li class="space">&nbsp;</li>
<li class="eintrag"><a href="#">Eigenheime</a></li>
<li class="space">&nbsp;</li>
<li class="eintrag"><a href="#">Garten und Landschaftsbau</a></li>

<li id="ende">&nbsp;</li>
</ul>
</div>

</body></html>

CSS-Datei styles.css [hier im Beispiel] im selben Verzeichnis abspeichern.

Code: 
body
{
	background-color: #999999;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #334;
}

a{
	text-decoration:none;
	color:#000;
}

/*Navigation Leiste und Galerie*/
div#leiste{
	position:absolute;
	width:795px;
	height:45px;
	padding:0;
	margin:0;
}

ul#punkte{
	width:655px;
	height:43px;
        padding:0;	
	margin:0 auto;
}
ul#punkte li{
	list-style-type: none;
	float:left;
	text-align:center;
        font:menu;
}

li#anfang{
	width:10px;
	height:42px;
	background-image: url('bg_leiste_links.gif');
 	background-repeat: no-repeat;
}

li.eintrag{
	height:42px;
	background-image: url('bg_leiste.gif');
 	background-repeat: repeat-x;
 	width:100px;

}
li.eintrag a{
	display:block;
	height:38px;
	padding:0;
	margin:0;
	vertical-align:middle;
}

li.space{
	height:42px;
	background-image: url('leiste_space.gif');
 	background-repeat: no-repeat;
 	width:1px;
 	margin:0;
 	padding:0;
}

li#ende{
	width:10px;
	height:42px;
	background-image: url('bg_leiste_rechts.gif');
 	background-repeat: no-repeat;
 	
}


Die CSS-Infos einer Seite kannst Du Dir z.B. mit dem Firefox-Add-on Web Developer anzeigen lassen -
HTML-Files [z.B.] mit Notepad++ - UTF-8 ohne BOM abspeichern. [statt St&uuml;tzmauern und Br&uuml;cken - Stützmauern und ...]
 
Zuletzt bearbeitet:
Die Seite ist doch von mir!

Ich möchte wissen, ob und wie es möglich das der Text in den einzelnen Listenelementen vertikal zentriert ist. Auf der Seite ist der Text ja immer oben.
Das sieht natürlich blöd aus. Ich möchte es gern so haben:

Code: 
                        |        Stützmauern     |
Industriebau            |                        |     Reko
                        |    und Br&uuml;cken    |

Jetzt verständlicher?
 
:-) Sorry, sprach der Igel und stieg von der Klosettbürste ...

Denke jetzt ist es klar - mit einer unordered list konnte ich das allerdings nicht realisieren.

Versuchs mal so:

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

<title>test</title>

<link href="style.css" type="text/css" rel="stylesheet" />

</head>

<body>

<div id="head">

<div class="nav01"><a href="#">Gesellschaftsbau</a></div>
<div class="nav01"><a href="#">Industriebau</a></div>
<div class="nav02"><a href="#">Stützmauern und Brücken</a></div>

</div>

</body></html>

Code: 
html                {margin:0px; padding:0px;}
body                {margin:0px; padding:0px; font-size:12px; font-family:tahoma;}
#head               {position:absolute; top:5px; left:50px;}

.nav01, .nav02      {text-align:center; float:left; width:100px; border:1px solid #919191; 
                     margin-left:1px;}  

.nav01              {padding:6px; padding-top:11px; height:23px; } /* [COLOR="Red"]einzeilig[/COLOR] */
.nav02              {padding:6px; height:28px; } /* [COLOR="Red"]zweizeilig[/COLOR] */

a                   {text-decoration:none;}


Style [optische Erscheinung] wäre natürlich noch anzupassen.
 
Zuletzt bearbeitet:
Super :D

Genau das was ich gesucht habe.
Danke :volllol:
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

A
CSS CSS vertikal zentrieren
Antworten
4
Aufrufe
1.987
netzgestaltung
netzgestaltung
S
CSS Vertikal zentrieren
Antworten
8
Aufrufe
930
CapFuture
CapFuture
Nick_SMI
CSS Fieldset Vertikal zentrieren
Antworten
5
Aufrufe
2.950
smallwall
S
M
HTML Text in <li> vertikal zentrieren. Wie macht mans richtig?
Antworten
2
Aufrufe
6.176
Trainmaster
T
raffiSSL
CSS Bild in div vertikal zentrieren
Antworten
7
Aufrufe
3.719
Mister Blue Sky
M
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 170 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz