Bilder in Liste mit float

rotor · 20.02.2006, 15:35

Hallo!

Ich bräuchte einen Tipp wie ich Bilder die sich jeweils in <li> Punkten befinden (horizontale Listenausrichtung) vertikal in die Mitte setzen kann da die Bilder verschieden Höhen haben und es so besser aussehen würde.
vertical-align: middle hat leider nicht funktioniert, code kann ich derzeit leider nicht posten.

EDIT:// Diese Diskussion scheint zu sagen: Es funktioniert gar nicht...
...Ich hab heute den kompletten Arbeitstag an diesem Problem verbracht GRML! ARGH! Gebt mir ein Hut, ich will einen Hut fressen!

Nightline · 20.02.2006, 18:08

Also Text kannst du immer schön vertikal zentrieren, aber Bilder leider nicht. Du kannst das Ganze aber durch einen kleinen Workaround trotzdem lösen, indem du das Bild in eine Tabelle im DIV legst:

PHP-Code:


			
<html>

<head>

<title>test</title>

<style type="text/css">

* {

margin: 0;

padding: 0;

}



img {

display: block;

}



#ebene {

width: 200px;

height: 300px;

text-align: center;

background-color: red;

}



table {

border: none;

}



.tabelle {

height: 300px;

line-height: 300px;

vertical-align: middle;

background-color: blue;

}

</style>

</head>

<body>



<div id="ebene">

<table>

<tr>

<td class="tabelle">

<img src="bild.jpg" />

</td>

</tr>

</table>

</div>



</body>

</html>

rotor · 21.02.2006, 10:25

Vielen Dank

Ich bin zwischendurch echt verzeifelt weil ich dachte das das gehen MUSS, na hoffentlich geht das irgendwann - mir offenbart sich keine Logik wieso es nicht gehen sollte.
Der Workaround lässt sich bis jetzt hervorragend in mein Layout einfügen, Danke nochmal!

rotor · 21.02.2006, 11:46

...leider funktioniert das bei mir nur im IE, aber ich habe auch leichte modifikationen vornehmen müssen

jetzt funktioniert es, ist zwar noch ein wenig umständlich - aber nun wird es schlanker gemacht:

Code:

#galerie div { 
  text-align: center; 
}

.galdiv {
  width: 90px; 
  height: 90px; 
  text-align: center; 
  background-color: red;
  display:block;
}

#galerie li {
  display:block;
  float:left;
  width:90px;
  margin:0 10px 10px 0;
  padding:0;
  text-align: center; 
  }

#galerie table { 
  border: none; 
  text-align: center; 
} 

#galerie .tabelle { 
  height: 90px; 
  line-height: 90px; 
  vertical-align: middle; 
  background-color: blue; 
  text-align: center; 
}

Code:

  
<div id="galerie">  
   <li>
      <div>
        <table> 
          <tr> 
            <td class="tabelle">
              <div><a href="#"><img src="bilder/0412113-68_t.jpg" width="65" height="48" /></a></div>
            </td>
          </tr>
        </table>
      </div>
    </li>
</div>

Boris · 21.02.2006, 12:06

Man kann es auch als Hintergrundbild einbinden und mit background-position: center; zentrieren lassen.

21.02.2006, 12:55

kann man machen, kann man dann aber nicht mehr verlinken.

Code:

<div><a href="#"><img src="bilder/0412113-68_t.jpg" width="65" height="48" /></a></div>

Boris · 21.02.2006, 13:00

Klar geht das - ein A mit display: block darüber und verstecktem Text tut es auch

21.02.2006, 13:24

was dann aber das selbe problem mit der ausrichtung bedeuten würde...

Boris · 21.02.2006, 13:46

Nein, wieso - man kann den Link einfach so groß wie die gesamte Ebene machen, in der das Bild drin ist. So ähnlich habe ich das schonmal realisiert:

http://www.ballettmodel-eva.de/galerie/?kat=1

AnnaStesia · 21.02.2006, 15:26

Wollte noch anmerken, dass so ein Konstrukt <div><li>...</li></div> eigentlich nicht erlaubt ist, und überhaupt brauchst Du die ganzen divs imho nicht; wenn Du sie in Deinem Kontext brauchst, stimmt eher was mit Deinem Kontext nicht

Heros Beispiel sollte jedenfalls an sich schon wunderbar funzen. Nur so als relativ unnütze Bemerkung am Rande

rotor · 21.02.2006, 15:45

Zitat:

Zitat von AnnaStesia

Wollte noch anmerken, dass so ein Konstrukt <div><li>...</li></div> eigentlich nicht erlaubt ist, und überhaupt brauchst Du die ganzen divs imho nicht; wenn Du sie in Deinem Kontext brauchst, stimmt eher was mit Deinem Kontext nicht

Heros Beispiel sollte jedenfalls an sich schon wunderbar funzen. Nur so als relativ unnütze Bemerkung am Rande

...eigentlich sind da ya auch noch mehrere <li> drinne, und natürlich das <ul>, also ich habe da schon eine liste drinne in dem <div>

21.02.2006, 16:48

Zitat:

Zitat von Boris

Nein, wieso - man kann den Link einfach so groß wie die gesamte Ebene machen, in der das Bild drin ist. So ähnlich habe ich das schonmal realisiert:
http://www.ballettmodel-eva.de/galerie/?kat=1

stimmt, zentriert sind die bilder. allerdings wäre vertical limit mit deiner richtungsdefinition wahrscheinlich ein noch beschissenerer film gewesen, als er es so schon war.

Zitat:

Zitat von rotor

Ich bräuchte einen Tipp wie ich Bilder die sich jeweils in <li> Punkten befinden (horizontale Listenausrichtung) vertikal in die Mitte setzen kann