✔ vertical-align: middle neben div

Status
Nicht offen für weitere Antworten.
Moin,

der Trick liegt einfach darin, dass die relevante Box .fotoserie_title nicht floaten darf :-)

CSS: 
ul#fotoserie li span {
        float:left;  /* gilt für alle span-Elemente, um ihnen "Block-Level-Charakteristika" zu verleihen */
}

ul#fotoserie li span.title span.fotoserie_title {
        display:table-cell;
        vertical-align:middle;
        height:65px;
        float:none; /* hebt für dieses span-Element die "globale"  float:left-Deklaration auf */
}

Dein vorgestelltes Konzept hab ich bei Null beginnend auf meine Weise umgesetzt, und es funktioniert wie gewünscht in allen Browsern, die die Tabellenwerte der display-Eigenschaft (hier table-cell) zu interpretieren wissen, die hier für eine Angabe zu vertical-align erforderlich ist - bei mir sind das FF, Mozilla, NN, Opera, Safari und Seamonkey. Für den IE dürften dir mein eingangs empfohlenen Links weiterhelfen, da sie einen Workaround für ihn enthalten.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-02-21">

<title>tutorials.de | demo_vom_manuel</title>

<style type="text/css">
<!--
ul#fotoserie {
        list-style:none;
        margin:0;
        padding:0;
}

ul#fotoserie li span {
        float:left;
}

ul#fotoserie li span.foto {
        position:relative;
        margin-right:30px;
}

ul#fotoserie li span.foto span.ul,
ul#fotoserie li span.foto span.ur,
ul#fotoserie li span.foto span.ll,
ul#fotoserie li span.foto span.lr {
        position:absolute;
        height:10px;
        width:9px;
        font-size:0;
}

ul#fotoserie li span.foto span.ul {
        top:0;
        left:0;
        background:transparent url(ul.gif) no-repeat scroll left top;
}

ul#fotoserie li span.foto span.ur {
        top:0;
        right:0;
        background:transparent url(ur.gif) no-repeat scroll right top;
}

ul#fotoserie li span.foto span.ll {
        bottom:0;
        left:0;
        background:transparent url(ll.gif) no-repeat scroll left bottom;
}

ul#fotoserie li span.foto span.lr {
        right:0;
        bottom:0;
        background:transparent url(lr.gif) no-repeat scroll right bottom;
}

ul#fotoserie li span.foto img {
        vertical-align:middle;
        border:0;
}

ul#fotoserie li span.title span.fotoserie_title {
        display:table-cell;
        vertical-align:middle;
        height:65px;
        float:none;
}
-->
</style>

</head>
<body>

<ul id="fotoserie">
    <li>
        <a href="#">
           <span class="foto">
               <span class="ul">&nbsp;</span>
               <span class="ur">&nbsp;</span>
               <span class="ll">&nbsp;</span>
               <span class="lr">&nbsp;</span>
               <img src="1.jpg" alt="">
           </span>
           <span class="title">
               <span class="fotoserie_title">Fototitel</span>
           </span>
        </a>
    </li>
</ul>

</body>
</html>


mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück