Beste mensen,

Ik wil drie plaatjes naast elkaar zetten. Alleen bij de eerste 2 staan ze niet naast elkaar maar ver uit elkaar.. Ook moet dit content precies in het midden staan.. wat doe ik fout en hoe moet dat?

Code:

PHP Code:

.information_under_left
{ background-image: url(../Images/Information_under/Center.gif);
  float: left;
  height: 27px;
  width: 3px; }

.information_under_center
{ background-image: url(../Images/Information_under/Center.gif);
  float: right;
  height: 27px;
  width: 848px; } 


Voorbeeld: www.devual.nl

Groeten,
Danny Ester.

Als je "information_under_center" ook op float left zet komt deze precies tegen "information_under_left" aan.

Oke nu heb ik de 3 naast elkaar gekregen maar hoe kan ik ze alle 3 precies centreren?

Code:

PHP Code:

.information_under_left
{ background-image: url(../Images/Information_under/Left.gif);
  float: left;
  height: 27px;
  width: 5px; }

.information_under_center
{ background-image: url(../Images/Information_under/Center.gif);
  float: left;
  height: 27px;
  width: 871px; }

.information_under_right
{ background-image: url(../Images/Information_under/Right.gif);
  float: left;
  height: 27px;
  width: 5px; } 


Misschien als je wat speelt met;

padding-left: *px;
padding-right: *px;

zet die 3 in een div en doe op doe die div
margin: 0 auto;

Google ook eens wat --> probeer wat uit.

Wat je natuurlijk ook kunt doen is een div, en daarin alles centreren

PHP Code:

<div id="wrap">
     <img src="images/image.png" alt="image" class="floating_element" />
     <img src="images/image.png" alt="image" class="floating_element" />
     <img src="images/image.png" alt="image" class="floating_element" />
</div>

//De css

div#wrap {
     float: left;
     width: 1000px;
     text-align: center;
}
.floating_element {
     margin: 0 0 0 20px;
} 


D.m.v de margin kan je ruimte tussen de image's laten zitten, maar ze worden in ieder geval wel gecentreerd, wanneer je gewoon gebruik blijft maken van dezelfde image's en deze niet veranderen kwa formaat zou ik 3 classes aanmaken met elk een eigen margin, dan moet het ook lukken. Let er dan wel op dat je alles op "float: left;" zet.

@jeffrey: text-align is zo`n beetje de slechtste manier om dat te doen. Je kunt volgende elementen echt niet alignen op die manier. Het beste wat je kunt TS, is gewoon je container waar alles in komt, een margin:0 auto mee geven.

Ook kun je:
position:absolute;
left:50%;
margin-left:-500px; /* gebasseerd op de helft van je complete container . in dit geval 1000px */

@Merijn
Je kunt die elementen wel degelijk centreren met de text-align, zie hier het voorbeeld :
http://www.q-basing.nl/kanwel.html

Wanneer je gebruik maakt van image's met fixed size's raad ik TS gewoon aan om te werken met de margin & float.