Text neben Bild vertikal zentrieren ?

armanix · 19.03.2009

Habe folgendes Problem:

Würde gerne einen Text (erklärung zum Bild) vertikal zum nebenstehenden Bild zentrieren
Leider haben mir bisher alle Lösungsansätze nix geholfen - auf Tables möchte ich übrigens verzichten! Der Text ändert sich häufig, soll also nicht position:absolut gesetzt werden.

HTML-Code:

Code:

<div id="news">
<img src="bild.jpg" />
<h1>Überschrift</h1>
<p>Text, der<br />
über mehrere Zeilen<br />
gehen soll.</p>
</div>

Bild ist natürlich float:left mit nem margin-right ...
Für den Text kann auch noch ein Div-Tag benutzt werden ... weiß nicht ob das hilft ?

pain2000 · 19.03.2009

AW: Text neben Bild vertikal zentrieren ?

Schaust du ... vllt. hilft dir das weiter...

armanix · 19.03.2009

AW: Text neben Bild vertikal zentrieren ?

pain2000 schrieb:
Schaust du ... vllt. hilft dir das weiter...

Danke für deinen Link - SelfHTML hab ich natürlich auch schon abgegrast - erfolglos !
Ich wollte eigentlich KEINE TABLES verwenden, da es hier um ein Layout geht und nicht um eine Aufzählung ... somit erübrigt sich dann leider dein Link !

achso ... habe ich schon geschrieben, dass das ganze mit CSS formatiert werden soll ?

pain2000 · 19.03.2009

AW: Text neben Bild vertikal zentrieren ?

armanix schrieb:
Danke für deinen Link - SelfHTML hab ich natürlich auch schon abgegrast - erfolglos !
Ich wollte eigentlich KEINE TABLES verwenden, da es hier um ein Layout geht und nicht um eine Aufzählung ... somit erübrigt sich dann leider dein Link !

Ach ja? Und wieso???

selfHTML.org schrieb:
Sie können nebeneinanderstehende Elemente mit unterschiedlicher Höhe, zum Beispiel Tabellenzellen in einer Tabellenzeile oder Textpassagen mit unterschiedlicher Schriftgröße innerhalb einer Zeile, im Verhältnis zueinander ausrichten.

Du kannst das Attribut auch auf andere Elemente anwenden... :rolleyes:

In diesem Bsp. ist es eben eine Tabelle...

armanix schrieb:
achso ... habe ich schon geschrieben, dass das ganze mit CSS formatiert werden soll ?

Mit was denn sonst?!? ...

armanix · 19.03.2009

AW: Text neben Bild vertikal zentrieren ?

pain2000 schrieb:
Ach ja? Und wieso???
Du kannst das Attribut auch auf andere Elemente anwenden... In diesem Bsp. ist es eben eine Tabelle...

Habe den Vorschlag von SelfHTML 1 zu 1 auf mein Div-Tag angewandt. Ergebnis: Nix ist passiert ... der Text hängt immernoch oben am Div !

HTML-Code:

Code:

<div id="news">
<img src="bild.jpg" />
<div id="news_content" class="mittig">
<h1>Überschrift</h1>
<p>Text, der<br />
in mehreren Zeilen<br />
angezeigt werden soll<br />
</p>
</div>
</div>

CSS-Code:

Code:

#news_content {
height:80px;
background-color:#F00;
}
	
#news img{
position:relative;
width:80px;
float:left;
margin-right:15px;
}

.mittig {
vertical-align:middle;
}

Mit was denn sonst?!? ...

Dachte du meintest, dass ich eine Tabelle benutzen soll, was ich ja eben nicht will.

Tattoomaus78 · 19.03.2009

AW: Text neben Bild vertikal zentrieren ?

hmm..wenns nur eine Zeile Text ohne Umbruch ist würde ichs mit

line-height: (Höhe von Bild)....px;

versuchen...

edit: okay vergiss es...hab eben gelesen dass der text über mehrere Zeilen gehen soll...

armanix · 19.03.2009

AW: Text neben Bild vertikal zentrieren ?

Tattoomaus78 schrieb:
okay vergiss es...hab eben gelesen dass der text über mehrere Zeilen gehen soll...

Hatte ich mir am Anfang auch gedacht ... aber das soll eben ein kleiner begleitender Text zum Bild werden ... Trotzdem aber danke für deinen Versuch !

lonelyhawk · 19.03.2009

AW: Text neben Bild vertikal zentrieren ?

pain2000 schrieb:
Ach ja? Und wieso???
Du kannst das Attribut auch auf andere Elemente anwenden... In diesem Bsp. ist es eben eine Tabelle...

echt? dann zeig mal her...?!

@armanix: mit dynamischer höhe wird das ganze kompliziert, da wie du schon geschrieben hast ein absolute schwierig ist. man könnte per javascript die höhe jeweils auslesen und dann das css automatisch anpassen lassen. aber das ist auch nicht gerade 'sauber'. an dieser stelle ist eine tabelle keine schlechte idee, und auch vertretbar. denn es wird ja tabellarischer inhalt dargestellt (bild -> text). tabellen an sich sind ja nicht böse

sie sollen nur nicht an stellen genutzt werden, wo sie nicht hin gehören.... das ist hier aber nicht der fall und sie erleichtern dir nebenbei auch noch die arbeit

armanix · 19.03.2009

Scheint ein schwieriges Thema zu sein, wenn keiner ner Antwort weiß?

Habe auch schon mit top:50% und margin-top: - (Div-Höhe/2) px probiert ... klappt aber auch nicht, da noch ein umschließender Div-Tag drumrum ist (div id="news")

lonelyhawk schrieb:
echt? dann zeig mal her...?!
mit dynamischer höhe wird das ganze kompliziert, da wie du schon geschrieben hast ein absolute schwierig ist. man könnte per javascript die höhe jeweils auslesen und dann das css automatisch anpassen lassen. aber das ist auch nicht gerade 'sauber'. an dieser stelle ist eine tabelle keine schlechte idee, und auch vertretbar. denn es wird ja tabellarischer inhalt dargestellt (bild -> text). tabellen an sich sind ja nicht böse sie sollen nur nicht an stellen genutzt werden, wo sie nicht hin gehören.... das ist hier aber nicht der fall und sie erleichtern dir nebenbei auch noch die arbeit

sorry, hatte deinen Beitrag noch nicht aufm Schirm - Danke für deine Antwort!
Muss doch aber auch irgendwie mit CSS lösbar sein, oder ? Ich hasse Tabellen

pain2000 · 19.03.2009

AW: Text neben Bild vertikal zentrieren ?

Habs zum testen mal so gemacht und es geht...

Code:

<html><head>
<style>
#news {
height:80px;
background-color:#F00;
vertical-align:middle;
border:1px solid #fff;
}
	
#news img{
position:relative;
width:80px; height:80px;
float:left;
margin-right:15px;
}
</style></head>
<body>
<div id="news">
 <img src="bild.jpg" />
 <p>Text, der<br />
  in mehreren Zeilen<br /></p>
</div>
</body></html>

... aber nur, wenn man einen boder setzt bei "news" k.A. wieso das jetzt so ist, hab leider keine Zeit mehr... sorry.
Die Überschrift hab ich weggenommen, weil bei 80px Höhe ist der Text eh schon viel zu lang...

lonelyhawk · 19.03.2009

AW: Text neben Bild vertikal zentrieren ?

armanix schrieb:
sorry, hatte deinen Beitrag noch nicht aufm Schirm - Danke für deine Antwort!
Muss doch aber auch irgendwie mit CSS lösbar sein, oder ? Ich hasse Tabellen

ja geht auch... du kannst mit css eine tabelle nachbauen... hat aber eigentlich nicht wirklich vorteile... und ist komplizierter. aber wenn du unbedingt willst...

HTML:

<style type="text/css" media="screen">
<!--
#rahmen {
    height:300px;
}
#bild {
    float:left;
    width:200px;
    height:300px;
    margin:0 20px 0 0;
}
#rahmen>#floating { 
    display:table;
}
#floating { 
    width:300px;
    height:100%;
    position:relative;
}
#floating div { 
    position:absolute;
    top:50%;
}
#floating>div { 
    display:table-cell;
    vertical-align:middle;
    position:static;
}
#floating div div {
    position:relative;
    top:-50%;
}
-->
</style>



<div id="rahmen">
<img src="x.gif" alt="dein bild" id="bild" />
    <div id="floating">
        <div>
            <div>
                <h1>Überschrift</h1>
                <p>Text, der<br />
                über mehrere Zeilen<br />
                gehen soll.</p>
            </div>
        </div>
    </div>
</div>

ist wie gesagt komplizierter und eventuell auch störanfälliger. im ff3 und ie 7 geht es jedenfalls so wie es jetzt hier ist. die höhen und breitenangabe bei #bild ist nur drin, weil ich ohne bild gearbeitet hab.. wenn dann dort ein bild ist, sollten die angaben weg können.

solang jetzt dein bild höher als der text ist, steht der text immer mittig... aber bei #rahmen muss halt die höhe des äußeren divs angegeben werden. na probier mal bisschen rum, vielleicht hilft dir es ja