vertical-align neben IMG mit float

daWonderer · 14. Mai 2007

Hallo,

ich habe ein Problem mit der Darstellung von Text innerhalb einer Tabellenzelle neben einem IMG, welches mit "float:left" formatiert ist.
Ich möchte gern, dass alles innerhalb der Zelle vertikal zentriert angezeigt wird.
Dazu habe ich die Zelle mit "vertical-align:middle" formatiert.
Das Problem: der Text wird am oberen Rand des IMG ausgerichtet und nicht vertikal mittig zur Zelle.

Code:

<html><body>
<table id='Topic1' class='active' cellpadding='0'>
 <tr>
  <td id='TopicCell1' style='height:200px;padding:6px;vertical-align:middle;'>
   <img id='ImgTop1' class='big' src='../img/karl_may_fest_g.jpg' alt='Bild Thema 1' style='float:left;margin-right:8px;'>
   Vom 18. - 20.  Mai findet in HOT das nächste Karl-May-Fest statt. 
   <a class='blue' href='#' target='_blank'>mehr...</a>
  </td>
 </tr>
</table>
</body></html>

Wie bekomme ich den Text neben dem Bild auch vertikal zentriert dargestellt?

Danke schon mal, Ralf...

bubu-der-uhu · 14. Mai 2007

Wenns nur für das eine mal ist kannst du der Tabelle ein line-height geben und das ein bissl einpassen (Ih habs mal 40px gegeben).
Ne andere Möglichkeit fällt mir auf die schnelle nicht ein.

ein schlauer · 14. Mai 2007

wieso benutzt du nicht einfach 2 Zellen?

daWonderer · 14. Mai 2007

ein schlauer schrieb:
wieso benutzt du nicht einfach 2 Zellen?

@ein schlauer

:grin:

Ursprünglich waren Bild und Text in 2 Zellen nebeneinander. Mein Auftraggeber meinte, es wäre schön wenn der Text rechts vom Bild fließt, also nach dem Ende des Bildes unterhalb dessen weitergeht. Also nehme ich nun eine Zelle und dachte ich mir "float" ist die Lösung. Nun habe ich aber beispielsweise ein relativ hohes Bild mit nur einer Zeile Text daneben. Diese wird wie gezeigt oben angeordnet und nicht vertikal zentriert. Das sieht so .... aus und kann ich nicht so lassen.

@bubu

Der Text geht über mehrere Zeilen, da die Zelle nicht sehr breit ist (je nach Bildschirm-Auflösung). Der Zeilenabstand sollte schon normal sein.

dkdenz · 14. Mai 2007

Du brauchst ein span um den Text herum.
vertical-align: Vertikale Ausrichtung: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

daWonderer · 14. Mai 2007

Die Idee hatte ich auch schon. Leider war das nicht erfolgreich!
Habe auch noch um den gesamten Zell-Inhalt ein P-Element gesetzt, aber es geht nicht.
Irgendwie habe ich das Gefühl, dass das mit "float" zusammenhängt. Evtl. wird dadurch das Ausrichten der nachfolgenden Elemente beeinflusst!?

Hier mit <p> & <span> (DIV statt Bild zum Testen):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<table id='Topic1' class='active' cellpadding='0'><tr>
 <td id='TopicCell1' style='height:200px;width:400px;padding:6px;vertical-align:middle;'>
  <p><div id='ImgTop1' style='float:left;margin-right:8px;width:150px;height:160px;background-color:#AACC11;'>ein Bild</div>
  <span style='vertical-align:middle;margin-top:auto;margin-bottom:auto;'>
   Vom 18. - 20.  Mai findet in HOT das nächste Karl-May-Fest statt. 
   Mit dabei u.a. RB II, Catch Bolder und Kalles Kombo.  
   <a class='blue' href='#' target='_blank'>mehr...</a>
  </span></p>
 </td></tr>
</table>
</body>
</html>

Habe auch noch die "margins" mit auto versehen, aber auch das hat nix geändert.

dkdenz · 14. Mai 2007

Hilft das weiter? SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

daWonderer · 14. Mai 2007

Danke, nein leider nicht. Der Text soll ja rechts daneben stehen, aber vertikal zentriert gemessen an der umgebenden Zelle. Durch das "float" scheinen aber diese Positionierungen ohne Wirkung. Der Text wird am oberen Rand des floatenden Elements ausgerichtet.

dkdenz · 14. Mai 2007

Ist es so ausreichend?

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	  "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<body>
		<table id='Topic1' class='active' cellpadding='0'><tr>
				<td id='TopicCell1' style='height:200px;width:400px;padding:6px;vertical-align:middle;'>
					<div id='ImgTop1' style='float:left;margin-right:8px;width:150px;height:160px;background-color:#AACC11;'>ein Bild</div>
					<p style='vertical-align:middle;'>
							Vom 18. - 20.  Mai findet in HOT das nächste Karl-May-Fest statt. 
							Mit dabei u.a. RB II, Catch Bolder und Kalles Kombo.  
							<a class='blue' href='#' target='_blank'>mehr...</a>
						</p>
				</td></tr>
		</table>
	</body>
</html>

daWonderer · 14. Mai 2007

Der Abstand der in dieser Lösung erscheint resultiert nicht aus dem "vertical-align" sondern aus einem Standard-Wert von "margin-top" > 0 für das <p>-Element.
Dieser obere Abstand ist ja in diesem Fall nicht schlecht, aber es gibt auch diese Zellen in der Form, dass der Text länger ist und dann unterhalb des Bildes weitergeht. Dort soll der Text dann natürlich am oberen Rand des Bildes beginnen und nicht weiter unten (was bei dieser Lösung der Fall wäre).

Aber vielleicht kann ich das mit dem <p> verwenden. Ich könnte ein Workaround machen und vorher die Text-Länge analysieren und anhand derer ein "margin-top" vergeben für das Element (ist ne PHP-generierte Seite).
Das Problem dabei ist nur, das die Breite nicht festgelegt ist für die Zelle, damit sie sich variabel an die Auflösung anpasst. Daraus folgt dann bei großen Auflösungen ein zu großer Wert für "margin-top" und bei kleinen halt ein zu kleiner.

hmmm...

anna55 · 14. Mai 2007

Beispiel mit Denker in der Mitte: SELFHTML: HTML/XHTML / Grafiken / Grafiken ausrichten

daWonderer · 14. Mai 2007

FAST!

Wenn jedoch der Text länger als eine Zeile ist (was ja durch die begrenzte Breite der Zelle vorkommt), wird er unter dem Bild fortgesetzt.

Danke schon mal für eure Mithilfe eine Lösung zu finden!

EDIT: Also anscheinend ist das nicht ohne JS lösbar.
Ein User aus dem IRC im #Selfhtml meint, dass das Problem sei, dass man innerhalb eines Block-Elementes andere Block-Elemente nicht vertikal zentriert formatieren kann.

Falls doch noch wer ne Lösung kennt, immer her damit!

daWonderer · 14. Mai 2007

Also nun doch - mit freundlicher Unterstützung von _flexo aus dem IRC hier der Workaround mit JS zur vertikal zentrierten Darstellung von Text neben einem Bild.

Code:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
                      'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='de' debug='true'>
<head>
  <title></title>
  <style type="text/css">
    td { width: 200px; border: 1px black solid; }
    img { border: 1px red solid; float: left; }
    span { border: 1px blue solid;  }
    div.foo { border: 1px green solid; }
    div.bar { border: 1px yellow solid; }
  </style>
  <script type="text/javascript">
    window.onload = function() {
      var elems = document.getElementsByTagName("div");
      for(var i = 0; i < elems.length; i++) {
        if(elems[i].className == 'bar') {
          var img = elems[i];
          do img = img.previousSibling; while(img.nodeType != 1);
          if(elems[i].offsetHeight < img.offsetHeight) {
            elems[i].style.marginTop = (img.offsetHeight / 2 - elems[i].offsetHeight / 2).toString() + "px";
          }
        }
      }
    }
  </script>
</head>
<body>
  <div>
    <table>
      <tr>
        <td>
          <div class="foo">
            <img src='bell.png' width='128' height='128' />
            <div class="bar">
              <span>foo</span>
            </div>
          </div>
        </td>
        <td>
          <div class="foo">
            <img src='bell.png' width='128' height='128' />
            <div class="bar">
              <span>nicht so viele zeilen</span>
            </div>
          </div>
        </td>
        <td>
          <div class="foo">
            <img src='bell.png' />
            <div class="bar">
              <span>foo bar qux lorem ipsum dolor bla bla bla mehr text und noch mehr text. gummibaerchen sind lecker.</span>
            </div>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>

Puuuh, nun kann ich beruhigt einschlafen

anna55 · 14. Mai 2007

Wow, das ist ja ein heftiges Teil. Ich kann mir nicht vorstellen, dass es nicht anders zu lösen geht. Man müsste mal planet4 auf den Plan rufen. Die ist doch so virtuos mit sowas.

planet4 · 15. Mai 2007

Hallo Anna, hallo daWonderer,

hab eure PN gerad erst gelesen, aber ich bin leider nicht so virtuos, wie ihr glaubt

@daWonderer: sei froh, dass du diese Lösung gefunden hast, wenn es denn unbedingt so ausgerichtet sein muss - wie du schon oben geschrieben hast, kann man nicht ein Block-Element in einem anderen mit vertical-align ausrichten, vertical-align bezieht sich immer auf ein Elternelement, dass ein inline-Element sein muss. Da ja deine Texte unterschiedlich lang sind und unten um das Bild herumfließen sollen, kommt man, glaube ich, auch mit anderen css-Formatierungen nicht weiter.

vielleicht zermartert sich ja noch jemand das Hirn und kommt auf eine bessere Lösung...

planet4.

bine · 15. Mai 2007

voll der Pfusch, aber so fängt halt dein text in der vertikalen mitte des Bildes an und da er ja nur kurz ist, kommt es optisch hin.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
td#bildtext	{
height: 400px;
width: 300px;
background: #ccc;
padding: 5px;
}

.float  {
float:left;
}


.center	{
width: 195px;
position: relative;
height: auto;
top: 50%;
margin-top: -50%;
padding-left: 5px;
}

html>body span.text	{
position: relative;
left: 100px;
}



</style>
</head>
<body>
	<table cellpadding="0" cellspacing="0" border="0">
	         <tr>
	                 <td id="bildtext">
	                                         <img class="float" src="bild1.jpg" width="100" height="130" border="0" alt="bild">
	                                         <div class="center">
                                                  	<span class="text">Aktuelle Ereignisse und Themen haben hier einen neuen Extra-Platz, ebenso wie Klatsch und Tratsch</span>
                                                  </div>
	                 </td>
	         </tr>
	</table>
</body>
</html>

daWonderer · 16. Mai 2007

Ein kleines Bsp. in dem mal der FF eine Eigenart hat.
Ausgehend vom Bsp. von _flexo habe ich versucht das Ganze für meine Seite zu übernehmen. Dabei ist mir aufgefallen (ich teste mit FF), dass das margin-top auch für das Bild interpretiert wird wenn kein Rahmen für das äußere DIV gesetzt ist. So musste ich nun einen Rahmen in der Hintergrundfarbe setzen, damit im FF alles korrekt dargestellt wird.

Bsp. dazu zu sehen unter: FF will nen Rahmen

ein schlauer · 16. Mai 2007

ich hab keine Ahnung, aber bei mir sieht das so aus wie ich verstanden habe, was du erwartest:

PHP:

<div 
style="border:1px solid black;background-color:#000;color:#fff;width:30%;"
>
<img style="float:left;margin:10px;" src='foto1.jpg' width='128' height='128' >
<p style='margin-top:64px;'>
foo ein langer Text foo ein langer Text
foo ein langer Text foo ein langer Text
foo ein langer Text foo ein langer Text
foo ein langer Text foo ein langer Text
</p>
</div>

daWonderer · 16. Mai 2007

Was ich meinte ist das hier (dein DIV (ohne Rahmen) in ner Tabelle):

Code:

<table><tr><td>
<div 
style="background-color:#000;color:#fff;width:30%;clear:left;"
>
<img style="float:left;margin:10px;" src='foto1.jpg' width='128' height='128' >
<p style='margin-top:64px;'>
foo ein langer Text foo ein langer Text
foo ein langer Text foo ein langer Text
foo ein langer Text foo ein langer Text
foo ein langer Text foo ein langer Text
</p>
</div></td></tr></table>

Im Firefox wird das "margin-top" des p-Elementes außer Kraft gesetzt wenn kein Rahmen um das äußere DIV ist. Dieses Verhalten wollte ich nur mitteilen.
Habe keinen Opera hier, wie sieht es dort aus?

ein schlauer · 16. Mai 2007

noch schlimmer, dass Problem (was ich vorher nicht gesehen habe) ist, dass das Bild durch das float aus dem Anzeigefluß geholt wird und für das äußere DIV also nicht mehr relevant ist, das läßt sich vermeiden, dadurch, dass man das äußere DIV ebenfalls floated:

PHP:

<div style="background-color:#000;color:#fff;width:30%;float:left;">
<img style="float:left;margin:10px;" src='foto1.jpg' width='128' height='128' >
<p style='padding-top:64px;'>
foo ein langer Text foo ein langer Text
foo ein langer Text foo ein langer Text
foo ein langer Text foo ein langer Text
foo ein langer Text foo ein langer Text
</p>
</div>

vertical-align neben IMG mit float

New member

New member

Lounge-Member

New member

New member

New member

New member

New member

New member

New member

Moderator

New member

New member

Moderator

New member

Lounge-Member

New member

Lounge-Member

New member

Lounge-Member