Bild in der Mitte ausrichten

[Sabine Müller]

Hallo Miteinander,

kann mir jemand verraten wie ich ein Bild in der Mitte eines DIV's ausrichten kann? Der Container hat eine Breite von 100%. In diesem soll sich alles in der Mitte ausrichten...

Style sieht wie folgt aus:

.bildmitte
{
    float:left;
    width:100%;
    text-align:center;
    padding:0px;
    margin:0px;
}

<div class="bildmitte"><img src="images.test.jpg" width="100" geight="75"></div>

Kann mir jemand auf die Sprünge helfen?

Vielen lieben Dank.

Sabine

[Gunnar Bittersmann]

Hello out there!

kann mir jemand verraten wie ich ein Bild in der Mitte eines DIV's ausrichten kann?

Genau so:

text-align:center;

<div class="bildmitte"><img src="images.test.jpg" width="100" geight="75"></div>

Es gibt kein 'geight'-Attribut. ;-) Es gibt aber ein 'alt'-Attribut, welches Pflicht ist!!

See ya up the road,
Gunnar

[kEv*]

Begrüßung ('Hallo') Sabine,

.bildmitte
{
    float:left;
    width:100%;
    text-align:center;
    padding:0px;
    margin:0px;
}

Für das ausrichten in der Mitte, solltest du dir die Eigenschaften margin(0, auto) und display (block,inline) nochmals genauer anschauen.

... geight="75"></div>

^
 Sollte bestimmt ein h werden?

AufWiedersehen ('Vielen Dank'),
LG
--
kEv*
----

[Gunnar Bittersmann]

Hello out there!

Für das ausrichten in der Mitte, solltest du dir die Eigenschaften margin(0, auto) und display (block,inline) nochmals genauer anschauen.

Für das Beantworten solltest du dir die Frage nochmals genauer anschauen. SCNR.

„Ein Bild in der Mitte eines DIV's [sic!*] ausrichten“, nicht ein DIV in der Mitte des Viewports.

See ya up the road,
Gunnar

* Apostrophitis

[kEv*]

Begrüßung ('Hallo'),

Für das Beantworten solltest du dir die Frage nochmals genauer anschauen. SCNR.

„Ein Bild in der Mitte eines DIV's [sic!*] ausrichten“, nicht ein DIV in der Mitte des Viewports.

Ich habe das gestern erst so gemacht. Ein Bild in einem DIV mittig ausgerichtet. Und es entspricht der Fragestellung.

  
img{  
  display:block;  
  margin:0 auto;  
  }  

Funktioniert prima.
Das ist falsch?

AufWiedersehen ('Vielen Dank'),
LG
--
kEv*
----

[Sabine Müller]

Vielen Dank an Alle für eure Hilfe.

Ich hab mein CSS etwas aufgeräumt und siehe da nun wird das Bild in der Mitte mit text-align:center ausgerichtet. Ich hatte im CSS Dokument das IMG Attribut global mit display:block deklariert. Nun habe ich eine weitere Klasse erstellt die das IMG Attribute überschreibt und schon klappts.

Nochmals herzlichen Dank.

Viel Spass
Sabine

[Felix Riesterer]

Liebe Sabine,

ich habe das erst diese Tage selbst gebraucht. Dabei hat es im IE natürlich mal wieder nicht geklappt - dort ist es mir aber inzwischen herzlich egal.

Damit das Bild horizontal mittig sitzt, reicht innerhalb des DIVs text-align: center; völlig aus, es sei denn, das IMG-Element ist in weiteren Elementen verschachtelt.

Das vertikale Zentrieren ist nicht ganz so einfach, denn vertical-align: middle; hilft nur ein Bisschen. Mit vertical-align wird das Bild nur innerhalb der Text-Zeile (es ist ja im Normalfall ein Inline-Element, verhält sich also in etwa wie ein Buchstabe) mittig nach oben und unten ausgerichtet. Daher muss man diese "Textzeile" auf die komplette Höhe des DIVs erweitern. Und das tut man mit line-height: 100%;!

.bildmitte {  
    text-align: center;  
    line-height: 100%;  
}  
.bildmitte img {  
    vertical-align: middle;  
}

Liebe Grüße aus Ellwangen,

Felix Riesterer.