kostenloser Webspace werbefrei: lima-city

1 input + 2 img sollen vertical-align: middle

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   vampiresilence

   

   vampiresilence hat kostenlosen Webspace.

   19:10, 28.9.2010

   Ich tüftel jetzt schon seit Stunden an einer kleinen Sache rum und ich krieg es einfach nicht gebacken.
   Ich möchte innerhalb eines <div> jeweils 1 <input> (checkbox) und 2 <img> nebeneinander darstellen, aber so dass alle vertikal mittig nebeneinander stehen. Die beiden Bilder haben die gleiche Höhe, daher wird es an diesem Punkt schonmal leichter, aber beide sind wesentlich höher als die Checkbox.
   
   Was auch noch ein Problem ist, ist dass die Bilder unterschiedlich breit sind und ich möchte, dass das rechte Bild immer direkt am linken Bild "klebt", also dass dort kein Abstand entsteht.
   
   Mein Code sieht grade folgendermaßen aus:
   
   

   <div>
     // image 1
     <input type="checkbox" name="img[]" value="url1" />
     <img class="leftimg" src="url.." />
     <img class="rightimg" src="url.." />
     <br />
   
     // image 2
     <input type="checkbox" name="img[]" value="url2" />
     <img class="leftimg" src="url.." />
     <img class="rightimg" src="url.." />
     <br />
   
     // etc..
   </div>

   (Die Zeilen werden mit PHP generiert und die Kommentare hab ich nur der Übersicht wegen eingefügt.)
   
   Mein CSS sieht so aus:
   

   div input[type=checkbox]
   {
   	float: left;
   	vertical-align: middle;
   }
   
   img.leftimg
   {
   	float: left;
   	height: 48px;
   }
   
   img.rightimg
   {
   	height: 48px;
   	margin-left: 0px;
   }

   
   
   Die CSS-Cracks sehen warscheinlich auf den ersten Blick, dass das nicht funktionieren kann, aber ich weiss es nicht besser und so langsam raucht mir die Birne. Hoffe ihr könnt mir helfen.
   
   Liebe Grüße
   - VampireSilence
   
   Beitrag zuletzt geändert: 28.9.2010 21:24:10 von vampiresilence

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. tom-moeller

   

   tom-moeller hat kostenlosen Webspace.

   9:45, 29.9.2010

   Die Eigenschaft vertical-align beeinflusst die vertikale Ausrichtung von Text in einer Zeile, bezogen auf das Elternelement, das ein Inline-Element sein muß. Man kann damit also kleineren Text an größerem Text oder auch an Grafiken ausrichten - nicht aber die vertikale Positionierung in einem Blockelement (z.B. div-Element) direkt bestimmen.
   
   Du musst der Checkboxund den Bildern ein eigenes DIV spendieren welches Du mit margin: 0 auto; zentrierst. Ceckbox und Bilder benötigen alle ein float:left in einem geeignet großen Container, dann sollte es gehen.
   
   Gruß Tom

4. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?