CSS - Grafik mittig ausrichten

09.10.2009, 16:39

Ich fange gerade mit CSS an, und habe schon die ersten 2 Probleme gefunden.

1. Ich wollte einrichten dass alle Grafiken mittig ausgerichtet werden das müsste doch eig mit
img {vertical-align:middle; }
gehen oder?

2. Wollte ich nur eine Grafik mittig ausrichten. Habe im body das Bild als "banner" benannt
<img src="bB_Banner.jpg" alt="banner">

Nun in CSS dürfte das doch dann so gehen:
#banner {vertical-align:middle; }

-> Nun, funktioniert beides nicht, hab schon gegoogelt und bein eig überzeugt das das so gehen sollte. Kann mir wer helfen?
Das Bild bleibt in beiden Fällen einfach am linken Rand.

Hier der komplette Code:

Zitat:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>bambusas Blog</title>

<style type="text/css">

h1 {color:#FF9900; font-size:20px; font-family:Arial; text-align:center; background-color:#CCCCCC}
img {vertical-align:middle; }

</style>

</head>

<body bgcolor="#999999">

<h1> bambusas Blog </h1><br /><br />
<img src="bB_Banner.jpg" alt="banner">

</body>
</html>

09.10.2009, 16:44

] ist das ganz gut beschrieben. Ich würde übrigends lieber mit Div's und einer externen .css Datei arbeiten, der Übersichtlichkeit halber.

09.10.2009, 16:50

Danke, klappt aber leider auch nicht^^

Zitat:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>bambusas Blog</title>

<style type="text/css">

h1 {color:#FF9900; font-size:20px; font-family:Arial; text-align:center; background-color:#CCCCCC}
#banner {vertical-align:middle; }

</style>

</head>

<body bgcolor="#999999">

<h1> bambusas Blog </h1><br /><br />
<div id="banner"><img src="bB_Banner.jpg" alt="banner"></div>

</body>

Liegt wahrscheinlich nicht am Code...... am Browser aber auch nicht...?

09.10.2009, 17:31

Mal middle durch center ersetzt?

09.10.2009, 18:04

Jop, geht auch nicht...

09.10.2009, 18:16

Ich bin mal so frei für bambusa zu antworten:
das

Code:

#banner {vertical-align:middle; }

ersetzen durch:

Code:

#banner {text-align:center; }

09.10.2009, 18:18

Wie gesagt, Hagn hat das Problem gelöst

09.10.2009, 18:26

Hier hab auch noch ne Lösung:

HTML-Code:

<p>
<img src="test.bmp" alt="bla" />
</p>

CSS-Datei:

HTML-Code:

p {
text-align: center;
}

Wenn du XHTML benutzt musst du ja eh ein p verwenden...

EDIT (autom. Beitragszusammenführung):

Oh hätt erst Hagns Post genauer lesen müssen...

09.10.2009, 19:57

Zitat:

Zitat von bambusa

2. Wollte ich nur eine Grafik mittig ausrichten. Habe im body das Bild als "banner" benannt
<img src="bB_Banner.jpg" alt="banner">

Nun in CSS dürfte das doch dann so gehen:
#banner {vertical-align:middle; }

Das geht nicht, weil ein Objekt nicht mit dem ALT-Tag identifiziert werden kann. Du kannst entweder eine Klasse (<img ... class="bilder_unten">) oder eine ID (<img ... id="bild123">) verwenden.

In CSS kannst du auf Klassen mit ".Klassennname" und auf best. Objekte mit "#Objekt" zugreifen. Wichtig dabei ist der Unterschied, dass ein Objekt(-Name) nur einmal in der Seite verwendet werden darf.

Eine weitere, "modernere" Methode wäre übrigens "margin: 0 auto;". Das hat aber den Nachteil, dass es von IE5 ignoriert wird. Lustig wirds sowieso erst beim vertikalen zentrieren ("vertical-align: center" geht sowieso nicht)...

Edit: Korrigiere, geht doch. Aber nicht bei Blockelementen wie DIV. Im aller meisten Fall will man aber nicht nur ein best. Objekt, sondern einen Bereich zentrieren (und oft ist das eben ein DIV).

10.10.2009, 00:03

Das vertikal nicht horizontal ist, was ich meinte, hat hagn mir auch schon erklärt^^

Ich benutze eben jetzt diverse div Blocks, und dann mit text-align:center;

Das ich kein Bild mit ALT bezeichnen kann, erklärt auch einiges, danke^^

10.10.2009, 02:55

Generell: Objekte werden an ihrem Container ausgerichtet (wenn man das nicht ändert, mit position:absolute; z.B.).
Das heisst unter anderem auch, dass vertical-align nur dann funktioniert, wenn du gleichzeitig den Container größer machst als das enthaltene Element (was bei body normalerweise nicht der Fall ist, der passt sich an den Inhalt an!).
Gleiches gilt für text-align (das sollte übrigens nur für inline-Elemente funktionieren, wie Text) und margin: auto; Dafür muss der Container auch breiter sein als der Inhalt (das merkt man nur normal nicht, weil body automatisch volle Breite hat; interessant wirds bei kleineren Containern).

Sowas sieht man übrigens mit

] sehr schön (Inspect Element und drüberhalten, dann werden die Abmessungen des Elements eingefärbt). Da kann man außerdem direkt rumeditieren am Style, und am Ende dann den Code rauskopieren und speichern.