|
|||
Schrift in einem Quatrat zentrieren
Hallo Zusammen
Ich weiß man wird mich schlagen für diese Dumme Frage Aber ich find die Lösung nicht Ich versuche mich gerade in HTML. Ich möchte gerne ien Quadrat erstellen mit einem Text genau in der Mitte Zentriert habe ich es schon, aber nur horizontal Vertikal bekomme ich das nicht hin. HTML: Zitat:
Zitat:
Link (Test) Test HTML Was mir auch helfen würde wäre die Möglichkeit die Backround Farbe eventuell die Postion direkt in dem DiV (HTML) einzutragen, dann könnte ich den CSS Eintrag mehrfach anwenden (was ja der Sinn sein sollte) LG Frank |
Sponsored Links |
|
|||
Hmmmmmmm
Ich vermute du meinst das ich grundsätzlich das Rechteck was ich darstelle als Tabelle ausgebe Die Postion kann ich nicht rausnehmen... die legt ja fest wo das Rechteck liegt Generell stellt sich die Frage wie ich innerhalb des Div's den Text zentrieren kann LG |
|
||||
z.B. so gehts (Quelle):
HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font: 100%/1.6 sans-serif; color: #fff; } .test { font-size: 3em; background: #4d4d4d; margin: 300px 0 0 170px; width: 250px; height: 140px; } .test p { text-align: center; position: relative; top: 50%; transform: translateY(-50%); } </style> </head> <body> <div class="test"> <p>Test</p> </div> </body> </html> |
|
|||
Eine weitere Möglichkeit wäre flexbox ---> Flexy Boxes ? CSS flexbox playground and code generation tool
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
|||
So
habe mal das mit den Line-height (im CSS-File) ausprobiert und auch das Beispiel von Manfred beides klappt prima... das mit dem Line-height ist natürlich irre praktisch Dazu aber eine Frage: a) die einheit "em" kenn ich nicht... was ist das ? b) Die Klasse "test" definiert das Rechteck... was ist denn ".test p"? ich verstehe zwar das wenn man nun innerhalb des Divs den Text in "P" einrahmt der Text formatiert wird... aber warum man da so macht versteh ich nicht c) diese Befehle verstehe ich nicht LG |
|
||||
zu a: em ist eine relative Größe. Infos dazu
zu b: .test p ist die Regel für den Absatz in .test. Wozu p --> hat was mit Semantik zu tun. Gute Erklärung (speziell 2. Hälfte) zu c: welche Befehle? du solltest dich erstmal mit den Basics vertraut machen: Little Boxes |
Sponsored Links |
|
|||
@manfred
Ich bin voll auf deiner Seite..... Es fehlt mit leider zur Zeit die Zeit... ich mache das zu selten.. leider und muss aber mit dem Projekt fertig werden... deshalb stelle ich schon mal fragen Diese Befehle meinte ich top: 50%; transform: translateY(-50%); ps: ich schau mir diese Links mal an! Die Klassen-Geschichte ist mir noch nicht so richtig aufgegangen Ich bin in dem Alter wo man noch mit Fortran programierte.. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Weiße Schrift weiß drucken | renet | CSS | 5 | 15.07.2009 21:58 |
[TYPO] Axel - eine neue Spiekermann et. al Schrift | andir | Grafik, Design, Typografie | 0 | 13.06.2009 23:57 |
Helle Schrift auf dunklen Hintergrund | Mesh | (X)HTML | 6 | 06.08.2007 21:31 |
skalierbare Schrift in IE / NN / FF / OP | siakone | CSS | 17 | 10.05.2006 12:21 |
abstand unter schrift = 0 | lomtas | CSS | 6 | 10.04.2005 03:15 |