✔ CSS: image align=absmiddle?

Status
Nicht offen für weitere Antworten.
F

Fleck06

Erfahrenes Mitglied
Hi Leute,

ich hab hier folgenden CSS-Code aus einer style.css...:

Code: 
Bild {
   float: left;
   border-top: 0px;
   border-right: 0px;
   border-bottom: 0px;
   border-left: 2px;
   margin-top:0px;
   margin-right: 3px; }

... welcher halt die Stil-Infos für ein Bild liefert.

Wie ändere ich ihn, sodass der Text neben dem Bild wie in HTML align="absmiddle" bekommt?
Habt ihr ein Vorschlag?
 
Ersetze mal float:left durch vertical-align:middle.

CSS: 
img {
vertical-align: middle;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 2px solid #ffff00;
margin-top: 0;
margin-right: 3px;
}
HTML: 
<img src="[Grafik-URL]" alt="">Vertikal zentrierter Text
 
Der Vorschlag funktioniert bei mir einwandfrei; Testumgebung: Firefox 1.5, IE 6.0, Mozilla 1.7, NN 7.0, Opera 8.5 | Win2000

Quelltext der Testseite:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
img {
vertical-align: middle;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 2px solid #ffff00;
margin-top: 0;
margin-right: 3px;
}
-->
</style>

</head>
<body>

     <p><img src="[Grafik-URL]" alt="">Vertikal zentrierter Text</p>

</body>
</html>
 
wie gesagt bei positioniert er den Text unter dem Bild...

hier der HTML-Code:
Code: 
<div>
  <span class="Bild">
  <a href="http://"><img class="Bild" title="test" alt="test" src="image.jpg" /></a>
  </span>
</div>
 
Auch hier wird der Text vertikal zentriert:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
.Bild {
vertical-align: middle;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 2px solid #ffff00;
margin-top: 0;
margin-right: 3px;
}
-->
</style>

</head>
<body>

<div>
  <span class="Bild">
  <a href="http://"><img class="Bild" title="test" alt="test" src="image.jpg" /></a>Vertikal zentrierter Text
  </span>
</div>

</body>
</html>
Und in dieser Variante ebenfalls:

HTML: 
<div>
  <span class="Bild">
  <a href="http://"><img class="Bild" title="test" alt="test" src="image.jpg" /></a>
  </span>Vertikal zentrierter Text
</div>
 
An welcher Stelle im HTML-Quelltext wird denn der Text notiert bzw. ausgegeben, etwa nach dem schliessenden </div>-Tag?
 
Dann notiere die Textausgabe vor dem schliessenden </div>, so wie ich es vorhin demonstriert habe.

Schliesslich soll der Text ja neben der Grafik vertikal zentriert werden, und die ist nunmal laut deinem Code-Posting innerhalb von <div>...</div> notiert.

Gegenprobe:

Wenn du anstelle der CSS-Eigenschaft vertical-align:middle für die Grafik das HTML-Attribut align="absmiddle" bzw. align="middle" verwendest, muß der Text ebenfalls im Quelltext unmittelbar vor und/oder nach der Grafik notiert werden:

HTML: 
<div>
  <span class="Bild">
  <a href="http://"><img class="Bild" title="test" alt="test" src="image.jpg" align="absmiddle" /></a>Vertikal zentrierter Text
  </span>
</div>
Denn das folgende Szenario würde auch nicht funktionieren:

HTML: 
<div>
  <span class="Bild">
  <a href="http://"><img class="Bild" title="test" alt="test" src="image.jpg" align="absmiddle" /></a>
  </span>
</div>
Vertikal zentrierter Text
Siehe hierzu auch SELFHTML: HTML/XHTML / Grafiken / Grafiken ausrichten.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück