Inhalt eines A-Tags verikal zentrieren

[FrankS]

Hallo zusammen,

ich scheitere gerade an dem Problem in einem A-Tag enthaltenen Text vertikal zu zentrieren.

Angenommen <a href="">Test</a> ist 100px breit und 50px hoch. Test soll vertikal zentriert sein.
Okay, das bekomme ich hin, wenn ich line-height auf 50px setze. Aber ich möchte dynamischen Inhalt einsetzen, der auch einmal über 2 Zeilen gehen darf. Dann würde line-height:50px den Inhalt nach unten drücken.

Habt ihr einen Tipp für mich, wie ich die Sache lösen kann?

Ach ja, ich möchte keine Tabelle verwenden.

Viele Grüße
Frank

[Felix Riesterer]

Lieber FrankS,

in einem A-Tag enthaltenen Text vertikal zu zentrieren.
[...]
Ach ja, ich möchte keine Tabelle verwenden.

und da hast Du fast schon die Lösung. Anscheinend erinnerst Du Dich daran, dass das in Tabellen anscheinend "automagisch" so gemacht wird. Dann nutze doch <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display2@title=diese Eigenschaft> zu Deinem Vorteil!

Liebe Grüße,

Felix Riesterer.

[Joachim]

Hi,

und da hast Du fast schon die Lösung.

Das wage ich zu bezweifeln, insbesondere weil...

<http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display2@title=diese Eigenschaft>

sich leider nur sehr bedingter IE-Unterstützung erfreut. Sagen wir es doch lieber so wie es ist: vertikale Zentrierung ist im derzeitig verfügbarem Css mit derzeitig zu berücksichtigen Browsern nur mit Hacks machbar.

Gruesse, Joachim

[Gunnar Bittersmann]

@@Joachim:

nuqneH

und da hast Du fast schon die Lösung.
Das wage ich zu bezweifeln, insbesondere weil...

Die Zweifel halte ich für unberechtigt, weil ...

<http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display2@title=diese Eigenschaft>
sich leider nur sehr bedingter IE-Unterstützung erfreut.

Im IE 8 funktioniert’s. Älteren IEs kann man mit JavaScript (als CSS-Expression) nachhelfen:

a  
{  
  width: 100px;  
  height: 50px;  
  vertical-align: middle;  
  display: block;  
  display: table-cell;  
  display: expression( [code lang=javascript](new Function('elem', '\  
[code lang=javascript]    elem.style.display = "block";\  
    elem.innerHTML = "[code lang=html]<span>
~~~" + elem.innerHTML + "`</span>`{:.language-html}";\  
    elem.firstChild.style.display = "block";\  
    elem.firstChild.style.paddingTop = ((elem.offsetHeight - elem.firstChild.offsetHeight) / 2) + "px";\  
[/code]  '))(this)[/code] );  
}[/code]  
  
In IEs < 8 ohne aktiviertem JavaScript wird halt nicht vertikal zentriert. So what?  
  
BTW: In einem XHTML-Dokument stehend sollte das Stylesheet wegen "<span>" und "</span>" als CDATA markiert werden.  
  
Qapla'

-- 
Volumen einer Pizza mit Radius z und Dicke a: pi z z a

[Joachim]

Hi Gunnar,

So what?

so stehts aber nicht im geposteteten Beispiel. Es löst auch nicht das Problem, das die Divs sich in der Höhe aneinander anpassen müssen, damit sie sich wie td verhalten - so wie sie es im FF tun. Und eh ich so eine Hackerei - mit Html in Expressions - mache, nehme ich persönlich lieber gleich Javascript.

Es ist imho auch ein Irrglaube, den IE6 bereits als aussterbende Randgruppe zu betrachten, auch wenn Google das gene möchte. Leider hat sich grade dieser Dino-  insbesondere bei zahlreichen _grossen_ Firmen - hartnäckig eingenistet.

Derzeit darf - insbesondere bei B2B-Anwendungen - eher IE8 als Randgruppe betrachtet werden. Und glaube mir - das nervt.

Gruesse, Joachim

[Der Martin]

Hallo,

Es ist imho auch ein Irrglaube, den IE6 bereits als aussterbende Randgruppe zu betrachten, auch wenn Google das gene möchte. Leider hat sich grade dieser Dino-  insbesondere bei zahlreichen _grossen_ Firmen - hartnäckig eingenistet.

wem sagst du das ...
Bei meinem Ex-Arbeitgeber laufen heute noch die meisten Rechner auf Windows 2000, etliche sogar noch mit NT4.0! Okay, die NT-Büchsen sind dann keine Büro-Arbeitsrechner, sondern Labor-PCs oder kleine Steuerzentralen für Maschinen, aber immerhin.
Für die Office-PCs gilt dort seit langem die Devise: Neu angeschaffte PCs kommen mit XP; die vorhandenen Win2k-Rechner werden nicht umgerüstet, sondern höchstens ersetzt, wenn sie nicht mehr funktionieren.

Derzeit darf - insbesondere bei B2B-Anwendungen - eher IE8 als Randgruppe betrachtet werden. Und glaube mir - das nervt.

Und auch Firefox ist im Business-Bereich eher ein Außenseiter, da überwiegt halt der Platzhirsch.

Ciao,
 Martin

[Joachim]

Nacht Martin,

Und auch Firefox ist im Business-Bereich eher ein Außenseiter, da überwiegt halt der Platzhirsch.

ja *seufz*

<positivdenk>
   Aber das erhält mir ja auch irgendwie meinen Arbeitsplatz ;-)
</positivdenk>

Gruesse, Joachim

[Gunnar Bittersmann]

@@Joachim:

nuqneH

Und eh ich so eine Hackerei - mit Html in Expressions - mache, nehme ich persönlich lieber gleich Javascript.

CSS-Expressions _sind_ JavaScript – dort notiert, wo sie hingehören: im Stylesheet.

Mit CSS-Expressions gibt man Darstellung an, kein Verhalten. Diese Angaben gehören also zur Präsentationsschicht (ins Stylesheet), nicht zur Verhaltensschicht (externes JavaScript oder 'script'-Elemente).

Es ist imho auch ein Irrglaube, den IE6 bereits als aussterbende Randgruppe zu betrachten

Das hängt von der Zielgruppe ab. Wo ich arbeite, tun wir das. Die Seiten sollten im IE 6 noch funktionieren, und wenn sich die Darstellung mit wenigen Handgriffen auch für den IE korrigieren lässt (d.h. wenn '* html foo {bar: baz}' dieselbe Wirkung zeigt wie '*+html foo {bar: baz}' im 7er), dann wird es getan. Andernfalls müssen die paar IE-6-Nutzer eben mit nicht optimaler Darstellung leben.

auch wenn Google das gene möchte.

Nicht nur Google.

Leider hat sich grade dieser Dino-  insbesondere bei zahlreichen _grossen_ Firmen - hartnäckig eingenistet.

Soll man diesen Firmen nun wünschen, dass irgendwer eine der vielen Sicherheitslücken des IE 6 ausnutzt und deren Netz lahmlegt, der Systemadmin eins auf den Deckel kriegt und der neue dann vernünftige Software installiert?

Derzeit darf - insbesondere bei B2B-Anwendungen - eher IE8 als Randgruppe betrachtet werden. Und glaube mir - das nervt.

Das glaube ich gern.

Qapla'

[Joachim]

Hi Gunnar,

CSS-Expressions _sind_ JavaScript – dort notiert, wo sie hingehören: im Stylesheet.

irgendwie ein Widerspruch, nicht war ;-)

Ich werde sicher _niemals_ anfangen, html via Expressions in die Seite zu schreiben, das ist imho wirklich dirty. Expressions sind für mich generell die absolute Notlösung, insbesondere weil man ie6 damit sehr leicht zum Absturz bringen kann.

Ich aktzeptiere dagegen ein zusätzliches Element, wenn Css keine Alternativen bietet. Viele Dinge - z.B. Tabs nach dem "sliding-doors-Prinzip" sind auch gar nicht anders umsetzbar. Es ist schön und gut, Css-Tutorials mit sauber strukturiertem Code umzusetzen, bei marketing-orientierten Seiten ist das Beharren darauf imho jedoch Elfenbeinturm-Politik.

Wo ich arbeite, tun wir das. Die Seiten sollten im IE 6 noch funktionieren

Ich soll also unseren wichtigsten Grosskunden künftig sagen: "Pech gehabt"? Get real!

Soll man diesen Firmen nun wünschen

Deshab werde hier mal besser keine (Firmen)Namen nennen. Aber die Gedanken sind frei...
 ;-)

Gruesse, Joachim

[Gunnar Bittersmann]

@@Joachim:

nuqneH

CSS-Expressions _sind_ JavaScript – dort notiert, wo sie hingehören: im Stylesheet.
irgendwie ein Widerspruch, nicht war ;-)

Nein. JavaScript ist eine Technik. Markupschicht, Präsentationsschicht und Verhaltensschicht sind abstrakte Ebenen und als solche völlig unabhängig davon, mit welchen Techniken sie umgesetzt werden. Die Präsentationsschicht wird technisch meist mit CSS umgesetzt und die Verhaltensschicht meist mit JavaScript, aber das muss nicht so sein.

„Mache den oberen Abstand so groß wie die halbe Differenz von Boxhöhe und Texthöhe“ gehört eindeutig zur Präsentationsschicht, nicht zur Verhaltensschicht – unabhängig davon, mit welcher Technik dies umgesetzt wird. Nun kann IrgendEin Browser dies nicht mit CSS allein, sondern nur mit Nachhilfe von JavaScript. Dann ist JavaScript in dem Falle die Technik, um die Präsentation umzusetzen. CSS dient als Container, um JavaScript einzubetten.

Ich werde sicher _niemals_ anfangen, html via Expressions in die Seite zu schreiben, das ist imho wirklich dirty.

Hm, es mag dirty sein, aus der Präsentationsschicht heraus das Markup zu ändern, ja.

Mit dem gleichen Argument dürfte man dies dann aber aus der Verhaltensschicht auch nicht tun, sondern nur bestehenden Elementen andere Eigenschften geben. Bye-bye innerHTML, createElement, appendChild?

Expressions sind für mich generell die absolute Notlösung,

Ich begrüße es, in CSS rechnen zu können. Schade eigentlich, dass dies nur in IEs möglich ist und CSS-Expressions im IE 8 abgeschafft wurden.

insbesondere weil man ie6 damit sehr leicht zum Absturz bringen kann.

Wenn man es nicht richtig macht, vielleicht. Wenn man aber dafür sorgt, dass eine Expression nur einmal ausgewertet wird …

Ich aktzeptiere dagegen ein zusätzliches Element, wenn Css keine Alternativen bietet. Viele Dinge - z.B. Tabs nach dem "sliding-doors-Prinzip" sind auch gar nicht anders umsetzbar.

Doch. Mit Pseudo-Elementen :before/:after sollte das möglich sein. (Jaja, IE 6 …)

Ich soll also unseren wichtigsten Grosskunden künftig sagen: "Pech gehabt"? Get real!

Ich sprach nicht davon, was ihr tun sollt, sondern davon, was wir tun.

Genaugenommen sprach ich doch davon, was ihr tun sollt: „Das hängt von der Zielgruppe ab.“ ;-)

Qapla'

[Joachim]

Hi,

ich scheitere gerade an dem Problem in einem A-Tag enthaltenen Text vertikal zu zentrieren.

Vertikal ist in Css eher mühsam. Ich habe mal einen Hack gebastelt, der vielleicht weiterhilft:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<style type="text/css">

a.verticalcentered {
        display: block;
        height: 100px;
        width: 100px;
        border: 1px solid red;
    }
    a.verticalcentered em {
        display: inline-block;
        width: 1px;
        height: 100%;
        vertical-align: middle;
        background: green;
    }
    a.verticalcentered span {
        display: inline-block;
        vertical-align: middle;
    }
</style>
</head>
<body>
    <div id="main">
        <a class="verticalcentered">
            <em></em>
            <span>Text<br>text</span>
        </a>
    </div>
</body>
</html>

Prinzip: vertikale Zentrierung ist nur für Zeilen vorgesehen, nicht aber für Inhalte. Ich setze ein Element auf die erforderliche Höhe und weise ihm die Eigenschaft: vertical-align zu. Dieses Element bestimmt nun meine "Zeile". Ein weiteres Element nimmt nun einen - möglicherweise mehrzeiligen - Inhalt auf und richtet sich innerhalb der Zeile entsprechend aus.

Hilfreich ist hier die Eigenschaft inline-block, die es mir erlaubt, eine Höhe zuzuweisen, ohne das ich den Zeilenumbruch bekomme.

Gruesse, Joachim

[Gunnar Bittersmann]

@@Joachim:

nuqneH

<a class="verticalcentered">
            <em></em>
            <span>Text<br>text</span>
        </a>

Zwei zusätzliche Elemente im Markup? Ist das dein Ernst? Sag bitte nein.

Qapla'

[Joachim]

Hi,

Zwei zusätzliche Elemente im Markup? Ist das dein Ernst? Sag bitte nein.

Das fragst Du allen Ernstes, nach dem Hack, den Du unten gepostet hast? Da stören mich persönlich die Elemente weitaus weniger.

Gruesse, Joachim

[Gunnar Bittersmann]

@@Joachim:

nuqneH

Zwei zusätzliche Elemente im Markup? Ist das dein Ernst? Sag bitte nein.
Das fragst Du allen Ernstes, nach dem Hack, den Du unten gepostet hast?

Ja. Mein Hack ist dort, wo er hingehört: im Stylesheet.

Da stören mich persönlich die Elemente weitaus weniger.

Dein Hack ist dort, wo er nichts zu suchen hat: im Markup.

Qapla'

[Joachim]

Hi,

Ja. Mein Hack ist dort, wo er hingehört: im Stylesheet.

Mein Hack funktioniert - javasriptlos - in allen relevanten Browsern. Dafür nehme ich gerne ein zusätzliches Element in Kauf - sofern man ein zusätzliches Element als Hack bezeichnen will. Das zweite brauchts eh nur bei Zeilenumbrüchen.

Gruesse, Joachim

[Gunnar Bittersmann]

@@FrankS:

nuqneH

ich scheitere gerade an dem Problem in einem A-Tag enthaltenen Text vertikal zu zentrieren.

Wo ist in einem <a>-Tag Text enthalten, der vertikal zu zentrieren wäre? Du meinst sicher in einem 'a'-Element enthaltenen Text.

Angenommen <a href="">Test</a> ist 100px breit und 50px hoch. […] Aber ich möchte dynamischen Inhalt einsetzen, der auch einmal über 2 Zeilen gehen darf.

Hast du bedacht, dass du weder die beim Nutzer verwendete Schriftart noch die Schriftgröße kennst? Vielleicht geht der Text bei ihm 3 Zeilen, vielleicht passen bei ihm schon 2 Zeilen nicht in 50 Pixel Höhe.

Qapla'