Hallo,

Ik ben bezig om een website te maken waarbij je drie afbeeldingen naast elkaar hebt. Door middel van justify wil ik de drie afbeeldingen uitlijnen over een div. Ik heb hiervoor een class gemaakt, maar op de ene pagina doet hij dit wel en op andere pagina lijnt hij niet uit.

Mijn vraag is: kan iemand mij adviseren hoe ik dit kan oplossen dat de drie afbeeldingen op alle pagina's hetzelfde uitgelijnd worden?

Mijn css is:
.right{
margin: 30px;
text-align: justify;

}
div#box4{
width: 1000px;
background-color: #660000;
float: left;
}

pagina 1 hier wordt wel uitgelijnd:
<div id="box4">
<h2>Gebouwen</h2>
<p class="right">
<img src="images/gebouwen/image1.jpg" width="250" alt="text">
<img src="images/gebouwen/image.jpg" width="250" alt="text">
<img src="images/gebouwen/image3.jpg" width="250" alt="text">
<img src="images/gebouwen/image3.jpg" width="250" alt="text">
</p>
</div>

pagina 2 hier wordt niet uitgelijnd:
<div id="box4">
<h2>Musea</h2>
<p class="right">
<img src="images/musea/image4.JPG" width="250" alt="text">
<img src="images/musea/image5.jpg" width="250" alt="text">
<img src="images/musea/imagr6.jpg" width="250" alt="text">
</p>
</div>

alvast bedankt.
Als ik het goed begrijp wil je de afbeelding in het midden van je div hebben?

Je kan dit beter doen met margin: 0 auto; dan met justify
Alleen zal je een wrapper moeten maken om de div denk ik. Anders kan je wellicht het plaatje zelf deze eigenschap geven.


.box img {
margin: 0 auto;
}


En anders, upload de gehele zooi ergens naartoe zodat we een pagina kunnen bekijken want hier worden we niet super veel wijzer van
Vaak werkt Margin:0 auto; alleen als je een display:block; bijvoorbeeld meegeeft en een vaste breedte hebt.

Mocht je toch een dynamische breedte gecentreerd uitgelijnt willen hebben, gebruik ik altijd de 'truc' om een display:table; en margin:0 auto; mee te geven. Door de display:table; kun je een dynamische element centreren.

Reageren