img in div, danach Text mit vertical-align:middle

[Chris S]

Hallo,

ich komme gerade nicht weiter, vielleicht kann mir jemand von euch helfen. Der Quelltext ist vorgegeben, ich kann nur per CSS formatieren.

Habe mal alles rausgeschmissen was für hier uninteressant ist:

<div>  
<img src="#" width="200" height="200" />  
</div>  
Beispieltext der mittig neben dem Bild stehen soll

Mit display:inline bekomme ich den Text zwar neben das Bild, aber dann steht er am unteren Rand, vertical-align:middle hilft hier leider nicht.

Geht das etwa gar nicht oder bin ich momentan zu müde?

Grüße, Chris

[Der Martin]

Hi,

Der Quelltext ist vorgegeben, ich kann nur per CSS formatieren.

das ist eine ganz schlechte Voraussetzung, wenn der Quellcode suboptimal ist.

<div>

<img src="#" width="200" height="200" />
</div>
Beispieltext der mittig neben dem Bild stehen soll

  
Wenn der Beispieltext irgendwie zum Bild gehört, sollte er mit dem Bild \*innerhalb\* des div-Elements stehen. Andernfalls ist das div-Element sinnlos: Ein gruppierendes Element mit nur einem einzigen Kindelement gruppiert nichts.  
Abgesehen davon ist der HTML-Code fehlerhaft, das alt-Attribut für das Bild fehlt.  
  

> Mit display:inline bekomme ich den Text zwar neben das Bild, aber dann steht er am unteren Rand, vertical-align:middle hilft hier leider nicht.  
> Geht das etwa gar nicht oder bin ich momentan zu müde?  
  
Das div-Element müsste als inline oder inline-block formatiert werden, und dessen Elternelement, das ja auch den Text enthält, bekommt vertical-align:middle.  
  
So long,  
 Martin  

-- 
Wichtig ist, was hinten rauskommt.  
  (Helmut Kohl, 16 Jahre deutsche Bundesbirne)  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

[Chris S]

Danke für die Antwort.

Das alt Attribut gibt es, das hatte ich nur hier weggelassen und in diesem div sind noch andere Elemente, die sind aber nicht wichtig für das eigentliche Problem das ich habe.

Du meinst dass vertical-align:middle in ein übergeordnetes Element soll, das kann ich machen, da gibt es noch ein anderes div außen rum das ich dafür nehmen könnte.

Hier mal der Code nach deinem Vorschlag, leider hilft das auch nicht weiter, der Text bleibt nach wie vor am unteren Bildrand, habe es auch mit display:inline-block versucht.

<div style="vertical-align:middle">  
  <div style="display:inline">  
    <img src="#" width="200" height="200" alt="#" />  
  </div>  
  Beispieltext der mittig neben dem Bild stehen soll  
</div>

Hast du noch eine weitere Idee?

Grüße, Chris

[Matthias Apsel]

Om nah hoo pez nyeetz, Chris S!

Hast du noch eine weitere Idee?

Informiere dich über die Möglichkeiten und Unmöglichkeiten von vertical-align.

Matthias

[Gunnar Bittersmann]

@@Chris S:

nuqneH

Mit display:inline bekomme ich den Text zwar neben das Bild, aber dann steht er am unteren Rand, vertical-align:middle hilft hier leider nicht.

Doch, du musst es nur auf das richtige Element anwenden: auf 'img'.

Qapla'

[Chris S]

Doch, du musst es nur auf das richtige Element anwenden: auf 'img'.

Qapla'

jIyaj

Super, das ist die Lösung. Dachte das hätte ich auch schon getestet, aber da war ich gestern wohl zu müde. So geht es jetzt:

<div>  
  <div style="display:inline">  
    <img src="#" width="200" height="200" alt="#" style="vertical-align:middle" />  
  </div>  
  Beispieltext der mittig neben dem Bild stehen soll  
</div>

Vielen Dank für die Hilfe.