CSS - vertikal zentrieren

[brandy]

Hallo!

Wieder muss ich das leidige Theme vertikales Zentrieren via CSS aufwerfen.
Hab schon in zahlreichen Foren usw. geschaut und auch schon einiges ausprobiert, aber leider komm ich zu keiner zufriedenstellenden Lösung.
http://www.foto-riedler.com/index.php?page=riedler
Würde gerne, die Bilder die nicht die volle Höhe (wie im Bespiel) haben vertikal zentrieren. Wie bekomm ich das am besten hin?

Vielen Dank!

[vinyl]

Vertical aligning is pretty tricky.

You could check this out: http://phrogz.net/css/vertical-align/index.html

[brandy]

Ich habs bereits geschafft, dass es ausgemittelt wird. Aber leider nur im Firefox. Ich habs mit vertical-align gemacht, doch muss ich mir noch genauer anschauen auf welchen Element ich die line-height setzen muss - dann funktionierts hoffentlich auch in IE 8+!

[vinyl]

Well if you have:

Code: Select all

<div>
<div></div>
</div>

and your text is in the middle one you should apply it on that one I guess!

[brandy]

Ok hier mein Template für die Slideshow auf der rechten Seite

Code: Select all

<!-- Imagebox -->
<div id="imagebox" align="center">
<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
{foreach from=$images item=image}
<li style="line-height: 540px;"><!--<a href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" class="group">--><img src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" style="vertical-align: middle;"/><!--</a>--></li>
{/foreach}
</ul>
</div>
<!-- # Imagebox -->

Wie Ihr seht hab ich da die line-height und das vertical-align eingebaut, aber es funktioniert im IE noch immer nicht!

Vielen Dank!

PS @ Vinyl: Is it okay for you, when I am writing in German?

[vinyl]

No German is not a problem, just not good in writing it..

What if you use this:

CSS

Code: Select all

<style>
.wrapper {
    display: table-cell;
    vertical-align: middle;
    width:  whatever_you_want;
    height: whatever_you_want;
	border: 4px solid #000;
}
.wrapper * {
    vertical-align: middle;
}
/*\*//*/
.wrapper {
    display: block;
}
.wrapper span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wrapper span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->

HTML:

Code: Select all

<ul>
<li>
<div class="wrapper"><span></span><img src="your_image.whatever" alt="..."></div>
</li>
<li>
<div class="wrapper"><span></span><img src="your_image.whatever" alt="..."></div>
</li>
</ul>

Modified from this page: http://www.brunildo.org/test/img_center.html

[brandy]

So habs gerade ausprobiert.
Bilder wurden vertikal nicht zentriert und zusätzlich hat er mir jedes Bild nochmals ausgegeben und untereinander gestellt.

Normalerweise sollte es ja mit vertical-align: middle; reichen oder? Wo hakst da?

Vielen Dank!

[vinyl]

Strange, it works fine here(using safari). Did you check out the link as well? Vertical aligning can be such a hassle

[brandy]

Ich weiß - der einzige Browser der immer Probleme macht ist IE...
Jetzt gehen mir dann die Ideen aus... Hat noch jemand einen Vorschlag, ich bin für jeden Tipp dankbar.

Vielen Dank!

[brandy]

Wollte jetzt die table-cell Method versuchen - funktioniert noch nicht. Wo muss ich dazu das table-cell einbauen, habs jetzt im img-Tag, vorher hatte ich es im li, dort funktionierts auch nicht...

[brandy]

So hab jetzt folgende Methode probiert (http://www.brunildo.org/test/img_center.html), ist der von vinyl ziemlich ähnlich:

Hier das Template:

Code: Select all

<!-- Imagebox -->
<div id="imagebox" align="center">
<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
{foreach from=$images item=image}
<li style="line-height: 540px;"><!--<a href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" class="group">--><div class="wraptocenter"><span></span><img src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}"/></div><!--</a>--></li>
{/foreach}
</ul>
</div>
<!-- # Imagebox -->

Hier das Stylesheet:

Code: Select all

/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
    position: relative;
}

.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.jcarousel-list li,
.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 75px;
    height: 75px;
}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */

.jcarousel-next {
    z-index: 3;
    display: none;
}

.jcarousel-prev {
    z-index: 3;
    display: none;
}


/*TESTCSS*/
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}

.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}


<!--[if lt IE 8]>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
<![endif]-->

So stehts nicht mal im Firefox in der Mitte, obwohl sich diese Variante vielversprechend anhört!
Schaut mal drüber vielleicht findet ihr was auf die Schnelle!
Dankesehr!

[brandy]

So hat jetzt funktioniert - kann ich nur empfehlen -http://www.brunildo.org/test/img_center.html

Vielen Dank euch allen!

[vinyl]

Good! I saw one little mistake in your css posted:

Code: Select all

<!--[if lt IE 8]>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
<![endif]-->

That should be in a separate <style> tag and not directly in the css.

Good its working