CSS - Grafik mittig ausrichten

B

bambusa

Moderator
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:

<!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>
Zum Vergrößern anklicken....
 
Du hast keine Berechtigung, den Link zu sehen, bitte Anmelden oder Registrieren
ist das ganz gut beschrieben. Ich würde übrigends lieber mit Div's und einer externen .css Datei arbeiten, der Übersichtlichkeit halber. 😉
 
Danke, klappt aber leider auch nicht^^

<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>
Zum Vergrößern anklicken....


Liegt wahrscheinlich nicht am Code...... am Browser aber auch nicht...? 😕
 
Ich bin mal so frei für bambusa zu antworten:
das
Code: 
#banner {vertical-align:middle; }
ersetzen durch:
Code: 
#banner {text-align:center; }
 
Hier hab auch noch ne Lösung:

HTML: 
<p>
<img src="test.bmp" alt="bla" />
</p>
CSS-Datei:

HTML: 
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...
 
Zuletzt bearbeitet:
bambusa schrieb:
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; }
Zum Vergrößern anklicken....

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).
 
Zuletzt bearbeitet:
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^^
 
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
Du hast keine Berechtigung, den Link zu sehen, bitte Anmelden oder Registrieren
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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Online-Statistiken

Zurzeit aktive Mitglieder
4
Zurzeit aktive Gäste
58
Besucher gesamt
62
Die Summen können auch versteckte Besucher enthalten.

Neueste Themen

Beliebte Forum-Themen

Zurück
Oben Unten