Bild mittig ausrichten

Flow09 · 04.07.2003, 12:10

Hey!

Ich möchte ein Bild mittig in einem <div>-Layer ausrichten! Eigentlich hätte ich mir gedacht dass das mit vertical-align:middle; funktionieren müsste, tut es aber nicht!
Ich habs im IE6, NN7 und Opera7.11 auf Win2000 probiert, in allen wird das Bild linksbündig angezeigt!
Hier mal der betroffene CSS-Code:

Code:

.standortekarte {
	background-color: #EFF3F7;
	width: 100%;
	vertical-align:middle;
	}
	
.standortekartebild {
	border:none;
	vertical-align:middle;
	}

.standortekarteheader {
	background-color:#FCFDFE; 
	font-size: 0.7em;
	color:#04314F;
	padding-left:10px; 
	padding-top:2px; 
	padding-bottom:2px;
}

Hab noch ein Bild angehängt wie es jetzt aussieht (die Landkarte sollte eigentlich mittig sein)!!

lg
Flow

webmichl · 04.07.2003, 12:16

Wem ordnest Du die Classes zu? Dem Bild oder dem Div?

[edit]Argh - erst genau lesen, dann antworten, Michl!

Könnte ein Zeilenumbruchproblem im Code sein - schreib die komplette DIV-Anweisung mal in eine Zeile

Flow09 · 04.07.2003, 12:32

Hier mal der HTML-Code:

Code:

      <div id="rechtercontainer">
        <div id="rechtercontainer-innen">
          <!-- Anfang Standorte Karte -->
          <div class="standortekarteheader">Standorte</div>
          <div class="standortekarte">
          	<a href="standorte.php" ><img class="standortekartebild" src="images/oesterreich.gif" alt="Landkarte mit Standorten"/></a>
          </div>
          <!-- Ende Standorte Karte -->
        </div>
      </div>
      <!-- End Tag rechtercontainer -->

lg
Flow

webmichl · 04.07.2003, 12:37

Versuchs mal mit

<div class="standortekarte"><a href="standorte.php" ><img class="standortekartebild" src="images/oesterreich.gif" alt="Landkarte mit Standorten"/></a></div>

machmal hilfts wirklich...

prefix · 04.07.2003, 13:19

mittig ausrichten =

text-align: center

betr. mittig im sinne von vertikal mittig: da ist der tag von dir an sich richtig - aber versuch mit dem container ohne fixe höhe zu arbeiten und leg das bild rein - in einen container!

gib mal die klasse für das bild weg - es reicht, wenn das unformatierte bild in einer definierte klasse liegt :-)

Flow09 · 04.07.2003, 13:34

Ähhh, ok

So da ich hab jetzt die Klasse aus dem img-Tag entfernt, fixe höhe im css hab ich eh nicht!
Bis jetzt hat sich nicht viel geändert ausser das dieser besch... default-Rahmen um das Bild wieder da ist!

prefix · 04.07.2003, 13:34

img {
border: none;
}

Flow09 · 04.07.2003, 13:38

OK, darauf hätt ich jetzt auch selber drauf kommen können

!!
Das bild ist aber noch immer linksbündig!

HTML-Code:

Code:

      <div id="rechtercontainer">
        <div id="rechtercontainer-innen">
          <!-- Anfang Standorte Karte -->
          <div class="standortekarteheader">Standorte</div>
          	<div class="standortekarte">
          		<a href="standorte.php" ><img src="images/oesterreich.gif" alt="Landkarte mit Standorten"/></a>
          	</div>
          <!-- Ende Standorte Karte -->
        </div>
      </div>

Flow09 · 04.07.2003, 13:43

Wie wars das mit CSS und Hass-Liebe !!
Momentan könnte ich das ganze Zeug durch Sonne, Mond und Sterne schiessen!

lg
Flow

prefix · 04.07.2003, 13:44

http://www.prefix.at/v5_1/test/flo/

funktioniert doch

Flow09 · 04.07.2003, 13:52

www.flowworks.at/vmg

Bei mir nicht!

prefix · 04.07.2003, 13:55

starte den html-bereich mal bitte richtig:

Code:

<html xmlns="http://www.w3.org/1999/xhtml">

Flow09 · 04.07.2003, 13:59

Warum das jetzt schon wieder verschwunden ist frag ich mich auch! Habs eigentlich eingefügt

, naja geändert hat es aber auch nix!

lg
Flow

prefix · 04.07.2003, 14:00

Code:

img {
	border: none;
}

img a {
	border: none;
}

.standortekarte {
	background-color: #EFF3F7;
	width: 100%;
	vertical-align:middle;
	text-align: center;
	}
	
.standortekartebild {
	border:none;
	vertical-align:middle;
	}

.standortekarteheader {
	background-color:#FCFDFE; 
	font-size: 0.7em;
	color:#04314F;
	padding-left:10px; 
	padding-top:2px; 
	padding-bottom:2px;
}

das ist mein funktionierendes style-sheet!

hast den cache schon geleert?

Flow09 · 04.07.2003, 14:15

So jetzt passts endlich!
War mein Fehler!!
Hab einen kleinen Syntax-Fehler gehabt --> mit text-aling wirds nicht funktionieren

Danke Dir!

lg
Flow