2 Listen-Elemente nebeneinander + gegenseitig vertikal zentriert

[Gunnar Bittersmann]

@@molily:

»» inline-block

Aha. Kannst du vielleicht etwas konkreter werden anstatt nur einfach ein Wort in den Raum zu werfen?

Das von juewi vorgetellte Markup

<ul class="photolist">  
  <li><img src="foo" alt="bar"/></li>  
  <li><p>Lorem ipsum dolor sit amet</p></li>  
</ul>  
<ul>  
  <li><img src="baz" alt="quz"/></li>  
  <li><p>Ut wisi enim ad minim veniam</p></li>  
</ul>

ist semantisch nicht korrekt, da es sich ja um _eine_ Liste handelt:

<ul>  
  <li>  
    <img src="foo" alt="bar"/>  
    <span>Lorem ipsum dolor sit amet</span>  
  <li>  
  <li>  
    <img src="baz" alt="quz"/>  
    <span>Ut wisi enim ad minim veniam</span>  
  <li>  
</ul>

Stylesheet:

ul.photolist  
{  
    list-style: none;  
    margin: 0;  
    padding: 0;  
}  
  
ul.photolist li  
{  
    border: 1px solid silver; /* nur zur Verdeutlichung */  
    margin: 10px 0;  
    padding: 10px; /* nur zur Verdeutlichung */  
}  
  
ul.photolist img, ul.photolist span  
{  
    display: inline-block;  
    vertical-align: middle;  
}  
  
ul.photolist span  
{  
    margin-left: 2em;  
    width: 10em; /* Breitenangabe muss wohl sein; der Wermutstropfen hier */  
}  
  
* html ul.photolist img, * html ul.photolist span /* für IE 6 */  
{  
    display: inline;  
}  
  
*:first-child+html ul.photolist img, *:first-child+html ul.photolist span /* für IE 7 */  
{  
    display: inline;  
}

Lediglich Firefox 2 bleibt auf der Strecke. Da wäre etwas mehr Aufwand zu betreiben, aber lohnt das noch? ↗http://bittersmann.de/articles/inline-block/

Und wie du sagtest, manchmal ist eine Tabelle einfach nur eine Tabelle.

Live long and prosper,
Gunnar