• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Klasse in Klasse vertikal ausrichten

N

natel

Neues Mitglied
Hi,

ich versuche die Klasse test-p in einer Klasse test-li vertikal auszurichten. (Alles läuft über das Listenelement und P. - sieht man am Codebeispiel).
Sobald ich mit margin-top nun die Klasse test-p auszurichten versuche, zieht die Klasse test-li nach unten.

Wie kann ich nur test-p ausrichten? Horizontal ist das ja kein Problem.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">


.test-ul {
list-style:none;
}


.test-li {
width:300px;
height:150px;
background:#000;
}


.test-p {
width:150px;
height:45px;
background:#009FFF;
margin-top:1px;

}
</style>
<title>Beispiel</title>
</head>


<body>


<ul class="test-ul">
<li class="test-li"><p class="test-p"></p></li>
<li class="test-li"><p class="test-p"></p></li>
</ul>
</body>
</html>

Danke für Eure Hilfe.
 
Da Du bei beiden Klassen eine Höhe und Breite angegeben hast, wird diese zu margin und padding dazu addiert, wodurch sich eine größere Höhe ergibt als Du gerne hättest. Ich würde dir empfehlen .test-li ein padding zu geben und dafür die Höhe zu verringern. Alternativ könntest Du auch .test-li per

Code: 
display: table-cell;

zu Tabellenelementen machen und könntest dann mit vertical-align den Inhalt ausrichten. Das geht aber (noch) nicht in allen Browsern.
 
Es existieren mehrere Möglichkeiten zur vertikalen Ausrichtung von Blockelementen. Aus Gründen der Browserkompatibilität würde ich allerdings einen JS-Ansatz gegenüber display: table-cell bevorzugen; Letzteres funktioniert nicht im IE 7/8 und schließt damit die Win XP-User aus. Wobei die Frage bleibt, ob es wirklich ein <p> innerhalb des Listelements sein muss. Falls dort nur eine einzige Zeile steht, würde sich diese auch über line-height zentrieren lassen.
 
Danke erstmal für Eure Antworten.

Ich habe es nun mit float geregelt. Was haltet Ihr davon?
Irgendwas was gegen diese Methode sprechen könnte?

Danke Euch!


Hier der Code:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">


.test-ul {
list-style:none;
}


.test-li {
width:300px;
height:150px;
background:#000;
margin-bottom:10px;
}


.test-p {
float:left;
width:155px;
height:45px;
background:#009FFF;
margin-top:5px;
margin-left:25%
}
</style>
<title>Beispiel</title>
</head>


<body>


<ul class="test-ul">
<li class="test-li"><p class="test-p"></p></li>
<li class="test-li"><p class="test-p"></p></li>
</ul>
</body>
</html>
 
Versuch's mal so.
Code: 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
ul.test {
 margin:10px;
 padding:0px;
 list-style:none;
 float:left;
 width:300px;
}

ul.test li {
 margin-bottom:3px;
 padding:50px 0;
 background:#000;;
}

ul.test p {
 margin:auto;
 background:#09f; 
 height:35px;
 width:155px;
 padding-top:15px;
 text-align:center;
}
</style>
<title>Beispiel</title>
</head>
<body>
<ul class="test">
<li><p>Beispiel</p></li>
<li><p>Beispiel</p></li>
</ul>
</body>
</html>
http://www.gipspferd.de/forumhilfe/vertical-zentrieren-mit-padding/
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben