Textzentrierung

Dobby · #1 (**permalink**) 02.12.2010, 20:13

Hallo!

Ich bin noch relativ unerfahren in Sachen HTML/CSS und bin daher auf eure Hilfe angewiesen.
Und zwar möchte ich einen Text innerhalb eines DIV-Containers zentriert ausrichten, und zwar von allen Seiten aus, top, bottom, left, right. Wenn ich <center> verwende, dann ist der Text nur von links und rechts aus gesehen mittig, nicht aber von oben und unten. Durch padding:top wird das Element größer als zuvor definiert. Wie bekomme ich das nun hin?

Liebe Grüße
Dobby

monran · #2 (**permalink**) 02.12.2010, 22:27

googlen. text vertikal zentrieren. da gibts schon massig fragen nach. genauso "wie ein bild vertikal zentrieren."

nevermind · #3 (**permalink**) 02.12.2010, 22:46

Ohne genaueres Codebeispiel kann man schlecht antworten.
Höhe/Breite entfernen und per padding positionieren.

padding: Innenabstand: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

ArcVieh · #4 (**permalink**) 02.12.2010, 23:56

Zitat:

Zitat von MetaCrawler

Ohne genaueres Codebeispiel kann man schlecht antworten.
Höhe/Breite entfernen und per padding positionieren.

padding: Innenabstand: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Ergänzung: horizontale Textausrichtung mit text-align:center;
Für die vertikale padding. Warum? Das ist hier erklärt:

Zitat:

[...]Oft sieht man zwar auch eine Vertikalzentrierung per line-height, jedoch ist davon abzuraten, da diese Methode erstens sehr ungenau ist, zweitens bei Zeilenumbruch überdimensionierte Zeilenabstände bewirkt, und drittens Text mit großer line-height extrem sensibel auf Textzoom reagiert, d.h. er wandert bei Vergrößerung wesentlich schneller nach unten als bei geringer line-height, so dass die Vertikalzentrierung sehr schnell verlorengeht.

Vor allem aus letzterem Grunde sollte für die Vertikalzentrierung von Menü-Texten immer eine geringe line-height gewählt werden, erst recht wenn der Text in einem Menü mit fester Höhe vertikal zentriert werden soll (wovon grundsätzlich allerdings abzuraten ist). In diesem Falle wird die Vertikalzentrierung des Textes erzielt, indem a height und padding-top bekommt (padding-bottom sollte hierbei Null sein). Dank geringer line-height wird sich der Text bei Vergrößerung nur unwesentlich nach unten bewegen, so dass das Menü relativ viele Vergrößerungsstufen verträgt, bevor sein Text überläuft.[...]

Zitat heiko_rs.

MetaKrauler hat aber recht: Ohne Codebeispiel ist unsere Hilfestellung begrenzt.

Zitat:

Zitat von Dobby

Wenn ich <center> verwende, dann ist der Text nur von links und rechts aus gesehen mittig, nicht aber von oben und unten. Durch padding:top wird das Element größer als zuvor definiert.

Du musst verstehen, wie sich (End-)Breite und (End-)Höhe in CSS errechnen.
Dazu schau dir bitte das Box-Model an!

Zitat:

Zitat von monran

googlen. text vertikal zentrieren. da gibts schon massig fragen nach. genauso "wie ein bild vertikal zentrieren."

Google bitte nach "xhtmlforum Für Fragende, für Antwortende".

Manfred62 · #5 (**permalink**) 03.12.2010, 13:28

Zitat:

Zitat von ArcVieh

MetaKrauler...

Wen krault Roman denn...?

scnr Manfred

nevermind · #6 (**permalink**) 03.12.2010, 13:44

hubspe · #7 (**permalink**) 03.12.2010, 13:54

Zitat:

Zitat von Manfred62

Wen krault Roman denn...?

scnr Manfred

ich glaub das Rumpelstilzchen mit dem roten Kopf.

Boris · #8 (**permalink**) 03.12.2010, 17:04

Ihr legt euch mit dem Falschen an

nevermind · #9 (**permalink**) 03.12.2010, 17:17

Es könnte Verletzte geben!

Aber Boris hat recht, nehmt lieber ihn...

hubspe · #10 (**permalink**) 03.12.2010, 21:28

Zitat:

Zitat von Boris

Ihr legt euch mit dem Falschen an

Zitat:

Zitat von MetaCrawler

Es könnte Verletzte geben!

Aber Boris hat recht, nehmt lieber ihn...

ich wollt doch bloß ein bißchen Roman sticheln.......

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln