meerdere afbeeldingen centreren

Status
Niet open voor verdere reacties.
cornelis180

cornelis180

Gebruiker
Lid geworden
19 apr 2007
Berichten
195
Ik wil graag meerdere afbeeldingen centeren; 1 afbeelding kan met margin-left; margin-right; display:block;

maar met meerdere afbeeldignen gaan ze (logisch; dat display:block) onder elkaar staan.. Dit heb ik nu dus weggehaald...

Wat moet ik toevoegen aan mijn css om meerdere afbeeldingen naast elkaar te krijgen?
 
Kun je hier wat mee?

Code: 
<style type="text/css" media="screen">
 body
{
background-image: url(start-strps.jpg);
margin: 0;
padding: 0;
font-family:  verdana, "comic sans ms", arial, hevetica, sans-serif;
text-align: left;
color: #000;
background: #ffffcc;
}
#container
{
width:800px;
border: solid 2px #ff0000;
margin:auto;
}
.plaatjes
{
width:700px;
text-align:center;
border: solid 2px #ff0000;
margin:auto;
padding:20px;
}
</style>
</head>

<body >

  <div id="container">container<br>
<br>

<div class="plaatjes">plaatje1  plaatje2 plaatje3 plaatje4 plaatje5</div><br>
<br>

</div>

</body>
 
Nee, k heb t nu zo:

background:none;
padding-left:10px;
padding-bottom:3px;
border:none;
text-align:center;
margin:auto;



die text-align:center; werkt dus niet :(
 
Laatst bewerkt:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
		body {margin: 0; padding: 0;}
		span {display: inline-block; width: 33.3%; text-align: center;}
	</style>
</head>
<body>
<div>
	<span><img src="001-t.jpg" width="180" height="161" alt="" /></span><span><img src="001-t.jpg" width="180" height="161" /></span><span><img src="001-t.jpg" width="180" height="161" /></span>
</div>
</body>
</html>

Je kunt ook px of andere eenheden nemen in plaats van procenten.
Zet de images in 'n span, die je als inline-block neerzet. Nu blijven ze op dezelfde regel staan, maar kun je de span wel dingen als 'n breedte geven.
De spans gelijk verdelen (hier 33.3 %, het zijn er drie) en de img in de span centreren.
Je moet wel de spans op één regel zetten. Behalve dat je ze breedte en zo kunt geven blijven ze zich als inline-elementen gedragen, dus als je ze in de html op 'n nieuwe regel zet komt er 'n spatie tussen te staan. En dan is 3 x 33.3 opeens meer dan 100...
(Heb ik net ook weer 'ns ontdekt, grinnik).
 
die text-align:center; werkt dus niet :(
Klik om te vergroten...
span, inline-block, %, images niet op verschillende html-regels, 3*33.3% + spaties > 100%
Klik om te vergroten...
??? :shocked:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Centreren maar</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        .centrerenmaar {text-align: center;}
        .centrerenmaar img {margin: 5px;}
    </style>
</head>
<body>

<p class="centrerenmaar">
	<img src="images/mtblanc210x140.png" width="210" height="140" alt="" />
	<img src="images/csshunter48x48.ico" width="48" height="48" alt="" />
	<img src="images/mtblanc210x140.png" width="210" height="140" alt="" />
</p>

</body>
</html>
Of denk ik nu te ongecompliceerd? :p

Met vriendelijke groet,
CSShunter

PS:
En mochten het er teveel worden voor de breedte, dan bedruipen ze zichzelf:
 
Laatst bewerkt:
span, inline-block, %, images niet op verschillende html-regels, 3*33.3% + spaties > 100%
Klik om te vergroten...

Ik ging ervan uit dat de afbeeldingen gelijkelijk verdeeld moesten worden, met gelijke tussenstanden. 'n Reeks afbeeldingen gewoon centreren is natuurlijk veel simpeler.
Ik had die spans (3 stuks) eerst onder elkaar staan, dus op 'n nieuwe regel. Bij elkaar zijn ze 99.9% breed. Maar 'n inline-block blijft zich wel als 'n inline gedragen, dus 'n nieuwe regel in de code (geen <br> dus, gewoon 'n enter) na 'n span wordt vervangen door 'n spatie. Net als wanneer je 'n woord op 'n nieuwe regel zet in de code.
Kortom: het werd 99.9% + twee spaties. en dat was net meer dan 100%, waardoor nummer 3 dus op de volgende regel kwam te staan.

Of je te ongecompliceerd denkt is aan de TS, want ik weet niet of hij wil wat jij denkt of wat ik denk.
 
Laatst bewerkt:
Thnx css hunter; jij ook Goeroeboeroe :)

Css hunters oplossing was wat ik bedoelde; eigenlijk heel eenvoudig, maar t probleem bij mij was dat ik eigenlijk niet aan had gedacht om een nieuwe div te maken. Ik dacht stop m gewoon in de huidige div, dan moet t wel werken; niet dus ;)

thnx
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan