CMS Made Simple Forums

Posted: **Sun Jun 05, 2011 1:26 pm**

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!

Posted: **Mon Jun 06, 2011 9:28 am**

Vertical aligning is pretty tricky.

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

Posted: **Mon Jun 06, 2011 12:16 pm**

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+!

Posted: **Mon Jun 06, 2011 5:43 pm**

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!

Posted: **Mon Jun 06, 2011 6:54 pm**

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?

Posted: **Mon Jun 06, 2011 7:23 pm**

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

Posted: **Mon Jun 06, 2011 9:02 pm**

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!

Posted: **Mon Jun 06, 2011 9:20 pm**

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

Posted: **Tue Jun 07, 2011 5:04 am**

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!

Posted: **Tue Jun 07, 2011 6:05 am**

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...

Posted: **Tue Jun 07, 2011 7:40 am**

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!

Posted: **Tue Jun 07, 2011 9:35 am**

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

Vielen Dank euch allen!

Posted: **Tue Jun 07, 2011 10:07 am**

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

CMS Made Simple Forums

CSS - vertikal zentrieren

CSS - vertikal zentrieren

Re: CSS - vertikal zentrieren

Re: CSS - vertikal zentrieren

Re: CSS - vertikal zentrieren

Re: CSS - vertikal zentrieren

Re: CSS - vertikal zentrieren

Re: CSS - vertikal zentrieren

Re: CSS - vertikal zentrieren

Re: CSS - vertikal zentrieren

Re: CSS - vertikal zentrieren

Re: CSS - vertikal zentrieren

[GELÖST]Re: CSS - vertikal zentrieren

Re: CSS - vertikal zentrieren