Problem mit dem vertikalen zentrieren

MacDan · 25.01.2011

Code:

<body>
<div id="wrapper">
<div id="logo">
<img src="logo.png" width="600" height="240" alt="" />
</div>

<div id="text">
Infos folgen in Kürze
</div>
</div>

</body>
</html>

Code:

@charset "utf-8";
/* CSS Document */

body {
	background-color: #4ebbf3;
}

#wrapper {
	vertical-align: middle;
}

#logo {
	text-align:center;
}

#text {
	text-align: center;
	color: #000; 
}

Das Porlbme ist das das Logo und der Text nicht vertikal in die mitte versetzt werden, kann mir aber auch nicht erklären warum.

Jemand eine Idee?

regards
denny

sokie · 25.01.2011

AW: Problem mit dem vertikalen zentrieren

vertical-align dient dazu nebeneinander stehende Elemente im Verhältnis zueinander anzuordnen:
.

NICHT Inhalte eines Containers vertikal zu zentrieren.

MacDan · 25.01.2011

AW: Problem mit dem vertikalen zentrieren

Ah ok danke, das erklärt schonmal das Problem.

Das erklären einige guides die man auf google als erstes findet dann völlig falsch... bzw lassen sie die Info aus das man nur nebeneinander stehende Elemente, damit anordnen kann.

Hab jetzt einen anderen Weg gefunden, kA ob es der schönste ist, aber er funktioniert.

Code:

#wrapper {
	position:absolute; 
        top:50%;
	left: 50%;
	margin-top: -140px;
	margin-left: -300px;
}

bb und regards
denny

fabil · 25.01.2011

AW: Problem mit dem vertikalen zentrieren

text-align geht wie auch erkennbar nur bei text..... willst du die grafik in die mitte bringen nehme

Code:

#logo {
margin: 0 auto;
}

dadurch müsste die grafik immer in der mitte sein...
und unten habe ich beim wrapper außerdem das gleiche angewendet..so ist das logo und der text vertikal in der mitte..

gesamter code:

Code:

<body>
<div id="wrapper">
<div id="logo">
<img src="logo.png" width="600" height="240" alt="" />
</div>

<div id="text">
Infos folgen in Kürze
</div>
</div>

</body>

und css

Code:

@charset "utf-8";
/* CSS Document */

body {
	background-color: #4ebbf3;
}

#wrapper {
	[B]margin: auto 0;
        width: 600px;[/B]
}

#logo {
	[B]margin: 0 auto;[/B]
}

#text {
	text-align: center;
	color: #000;
}

bei problemen melden

MacDan · 25.01.2011

AW: Problem mit dem vertikalen zentrieren

Code:

margin: 0 auto;

Wollte bei mir vorhin wo ich es probiert habe, nicht funktionieren.
Mhm wer weis, werde es nacher wenn ich wieder daheim bin nochmal probieren.

Muss man bei diesem auch noch die Anpassung in

Code:

margin-top: -140px;

machen?

Code:

text-align: center;

Das funktioniert bei mir auch mit Bildern und laut google wird das auch oft bei Tutorials mit Bildern gemacht.

Danke auf jeden Fall für weiteres feedback.

regards
denny

fabil · 25.01.2011

AW: Problem mit dem vertikalen zentrieren

MacDan schrieb:
Muss man bei diesem auch noch die Anpassung in

Code:

margin-top: -140px;

machen?

nein, ich habe den fertigen code dir oben nochmal geschrieben...so müsste er passen..beachte auch dass im html dokument der wrapper hinzugefügt wurde(div)...

immer gerne

P.S.: schau nochmal oben beim code, ich habe wohl width beim wrapper vergessen..dadurch waren diese nicht in der mitte...der wrapper sollte so groß wie dein bild oder logo sein...hast du evtl. ein link?

MacDan · 27.01.2011

AW: Problem mit dem vertikalen zentrieren

naja, keine Zeit mehr gefunden das zu ändern. weil der schnelle Zweck wurde erfüllt

vielen dank für die Hilfe

Studiosus Zwickau 2011

regards
denny