Wort mittig/mittig positionieren (jaja....)
Chräcker Heller
- css
Hallo,
ich weiß, ich hätte auch gleich nach den beiden Frames fragen können, aber nach einer Weile im Archiv glaube ich langsam, das es doch nicht so leicht ist wie es scheint. Eine menge Tips, aber selbst bei copy-and-paste muß ich wohl was falsch machen.
Einfache Frage: Wie bekomme ich einen beliebigen Inhalt, sagen wir das Wort "Hallo" vertikal und horizontal strict per css in die Mitte? (Ja, ich habe dem body und dem html-Bereich eine 100% Höhenvorstellung verordnet, und dann Divs und Tables um mein Wort gelegt, natürlich selbige margins mit auto versehen etc.... es mittet nicht bei mir....
Chräcker
Hi Chräcker,
magst du denn noch anderen Content auf der Seite haben? :)
Ciao Sascha
Hallo,
magst du denn noch anderen Content auf der Seite haben? :)
kommt bei mir manchmal sogar vor ,-) Aber nichts, was nicht in ein Div oder in eine Tabellenzelle passen würde.... die Antwort "oben" paste damit schon, Danke trotzdem....
Chräcker
Kein Problem (du Stempelfanatiker *g+)
Ich bekenne mich nun auch schon zu dieser Sucht ;)
Ciao Sascha
Hallo,
Einfache Frage: Wie bekomme ich einen beliebigen Inhalt, sagen wir das Wort "Hallo" vertikal und horizontal strict per css in die Mitte? (Ja, ich habe dem body und dem html-Bereich eine 100% Höhenvorstellung verordnet, und dann Divs und Tables um mein Wort gelegt, natürlich selbige margins mit auto versehen etc.... es mittet nicht bei mir....
*g*
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html style="height:100%;">
<head>
<title>Text in der Mitte</title>
</head>
<body style="height:100%;">
<table style="width:100%; height:100%;">
<tr>
<td style="text-align:center; vertical-align:middle;">
Hallo
</td>
</tr>
</table>
</body>
</html>
So sollte es mitten.
viele Grüße
Axel
Hallo,
DANKE!!! wie gut, daß ich nicht fies vor Tabellen bin ;-))))
(Und damit alle anderen Archivsucher wie ich diese Lösung besser finden gleich noch ein paar zu indizierende Suchbegriffe für die Suchmaschine:
Inhalt zentrieren vertikal vertical css mitte mitten horizontal div tabelle inhalt blödes css Tabellenmißbrauch height 100% wieso nur) ;-)
Chräcker
Hallo,
(Und damit alle anderen Archivsucher wie ich diese Lösung besser finden gleich noch ein paar zu indizierende Suchbegriffe für die Suchmaschine:
Inhalt zentrieren vertikal vertical css mitte mitten horizontal div tabelle inhalt blödes css Tabellenmißbrauch height 100% wieso nur) ;-)
*g*
Na, da machen wir doch die _in_ der Tabelle zentrierte Tabelle auch noch hier rein:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html style="height:100%;">
<head>
<title>Tabelle in der Mitte</title>
</head>
<body style="height:100%;">
<table style="width:100%; height:100%;">
<tr>
<td style="text-align:center;">
<table border="1" style="margin:auto;">
<tr>
<td>Zellinhalt</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
viele Grüße
Axel
Hi Chräcker Heller,
bei der vertikalen Zentrierung braucht CSS einen Bezugspunkt, z.B. eine Tabellenzelle. Wenn Du das Gleiche ohne Tabellen erreichen willst, kannst Du per span einem Leerzeichen im gleichen Absatz eine line-hight von der Höhe des Divs verpassen und dann hast Du auch ohne Tabelle einen Bezugspunkt, auf den sich die vertikale Zentrierung beziehen kann. Ideologisch kämest Du dann der reinen Lehre ein Stück näher *g* EIgentlich irre, wie böse Tabellen sind!
Viele Grüße
Mathias Bigge
bei der vertikalen Zentrierung braucht CSS einen Bezugspunkt, z.B. eine Tabellenzelle. Wenn Du das Gleiche ohne Tabellen erreichen willst, kannst Du per span einem Leerzeichen im gleichen Absatz eine line-hight von der Höhe des Divs verpassen und dann hast Du auch ohne Tabelle einen Bezugspunkt, auf den sich die vertikale Zentrierung beziehen kann. Ideologisch kämest Du dann der reinen Lehre ein Stück näher *g*
Nicht wirklich. Was soll '<span> </span>' denn für eine Auszeichnung sein?
MI
Hallo Mathias,
bei der vertikalen Zentrierung braucht CSS einen Bezugspunkt, z.B. eine
Tabellenzelle. Wenn Du das Gleiche ohne Tabellen erreichen willst, ...
... könnte man vielleicht daran denken, dem Mutterelement die Eigenschaft
display:table-cell zu geben, wenn nicht, ja wenn nicht einige Browser damit
Probleme zu haben scheinen. :-/
http://www.tepasse.org/selfraum/text-der-sich-nicht-zwischen-oben-und-unten-entscheiden-kann.html
Hallo Chräcker,
(Ja, ich habe dem body und dem html-Bereich eine 100% Höhenvorstellung
verordnet, und dann Divs und Tables um mein Wort gelegt, natürlich selbige
margins mit auto versehen etc.... es mittet nicht bei mir....
Ich habe mal irgendwo folgenden Hack mit "absolut-relativer" Positionierung
gesehen und bei mir nach rumtesten gespeichert. Vielleicht hilft es Dir; ich
habe bisher aber nur Mozilla, IE6 und Opera 7 (Beta irgendwas) getestet.
Hallo,
auch nicht schlecht, vor allem, wenn man (wie in meinem fall) weiß, wie groß das zu zentrierende Feld ist....
Danke,
Chräcker
Hi Cräcker,
Nur ein kleiner Verbesserungs-Vorschlag:
auch nicht schlecht, vor allem, wenn man (wie in meinem fall) weiß, wie groß das zu zentrierende Feld ist....
Wenn es sich um Text handelt weisst Du das ja eben nicht (Mozilla z.B. zoomt auch bei "px"). Verwende bei margin, width und font-size daher lieber "em" statt "px", sonst zerschiesst es Dir die schöne Zentrierung.
Dann ist die Schrifgrösse zwar auch im IE skalierbar, aber wenn Du genug Platz hast (was ich bei so einem Layout mal annehme) ists ja halb so schlimm.
Nix für ungut + schöne Grüsse
stefan
Hallo,
ne, ja, ne ;-) richtig natürlich, das war jetzt mißverständlich von mir. Bei meinem Projekt habe ich eine Grafik (genauer, ein Block aus 9 Grafiken), die ich zentriert haben möchte. Das "mit dem mittigen Wort" war nur ein Beispiel zur vereinfachung.... das dann natürlich bei Tims Methode Schwierigkeiten machen könnte...
Chräcker