Gunnar Bittersmann: Linksbündige Ausrichtung IMG und P in zentriertem DIV Block

Beitrag lesen

@@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'

--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)