Linksbündige Ausrichtung IMG und P in zentriertem DIV Block

[Hima]

Hi,

ich habe eine Frage bezüglich CSS für die folgende Aufgabenstellung. Ich erstelle eine ganz einfache Seite welche eine Photogallerie repräsentiert. Zu diesem Zeck gibt es diverse DIV Blöcke (Header, Navi, Content, Footer).

Im eigentlichen Content DIV sollen 2 Dinge untergebracht sein: Ein Foto und darunter ein Text. Ich würde gerne Das Foto zentriert im Browser (unabhängig von seiner Größe (Hoch versus Querformat)) anzeigen lassen und den beschreibenden Text darunter. Der Text soll aber nicht zentriert sein sondern linksbündig mit dem linken Rand des Fotos abschliessen.

Mein Code bisher:

HTML
...
<div id="gallery"><img id="photo" ...><p id="label">...</p></div>
...

CSS
...
div#gallery{
  margin: 0 auto;
}
...

Somit ist das Bild wunderschön zentriert und der Text darunter auch. Wie gesagt, der Text soll aber linksbündig unter dem Bild stehen.

Kann mir jemand helfen?

Vielen Dank.

[Matthias Apsel]

Om nah hoo pez nyeetz, Hima!

<div id="gallery"><img id="photo" ...><p id="label">...</p></div>

Du wirst sicher mehrere Fotos haben wollen. Deshalb ist die ID Photo nicht günstig, gleiches gilt für das div gallery. Denn es sollen sicher mehrere solcher gruppierten Elemente geben.

Beschäftige dich mit dem Nachfahrenselektor.

Textalign ist die Eigenschaft, die dir beim Ausrichten von Text hilft.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

<div id="gallery"><img id="photo" ...><p id="label">...</p></div>

Du wirst sicher mehrere Fotos haben wollen. Deshalb ist die ID Photo nicht günstig, gleiches gilt für das div gallery.

Günstig könnte auch der Einsatz des Markups sein, den HTML5 bereithält:

<figure>  
  <img src="foo"/>  
  <figcaption>Lorem ipsum</figcaption>  
</figure>

Zu beachten ist dabei, dass man für nicht ganz aktuelle Browser

figure, figcaption {display: block}

angeben muss und alten IEs mit JavaScript auf die Sprünge helfen muss:

document.createElement('figure');  
document.createElement('figcaption');

Textalign ist die Eigenschaft, die dir beim Ausrichten von Text hilft.

?? Diese verhält sich schon ohne weites Zutun wie gewünscht, d.h. als ob "left gesetzt wäre (bei LTR-Text).

Man muss allerdings den Container ('figure') so schmal machen, wie es das Bild erfordert. Shrink-to-fit sollte bei Zentrierung schwierig werden: absolute Positionierung ist nicht das, was man möchte; 'float' scheidet aus.

Aber wenn man die Breite des Bildes kennt, weist man diese dem Container zu:

figure  
{  
  display: block;  
  margin: auto;  
  width: 666px;  
}

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Textalign ist die Eigenschaft, die dir beim Ausrichten von Text hilft.

?? Diese verhält sich schon ohne weites Zutun wie gewünscht, d.h. als ob "left gesetzt wäre (bei LTR-Text).

Offensichtlich ist dies beim OP (aufgrund nicht mitgeteilter weiterer CSS-Deklarationen) nicht so.

Matthias