Schrift in einem Quatrat zentrieren

muemmi · #1 (**permalink**) 04.04.2014, 12:18

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:

CSS:

Zitat:

.mm-leista1
{
background: #4d4d4d;
padding:0px;
margin:0px auto 0;
font-size: 48px;
font-family: Arial, Verdana, Geneva, Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
color: #FFFFFF;
text-align:center;
position:absolute;
top:300px;
left:170px;
cursor:auto;
width: 250px;
height: 140px;
z-index: auto !important;
}

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

dazzle89 · #2 (**permalink**) 04.04.2014, 12:52

Du könntest es mit display: table-cell und vertical-align: middle ausprobieren und position: absolute herausnehmen

muemmi · #3 (**permalink**) 04.04.2014, 13:15

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

Manfred62 · #4 (**permalink**) 04.04.2014, 13:18

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>

dazzle89 · #5 (**permalink**) 04.04.2014, 13:26

oder dem div einfach eine line-height von 140px geben, solange der text einzeilig bleibt

explanator · #6 (**permalink**) 04.04.2014, 13:30

Eine weitere Möglichkeit wäre flexbox ---> Flexy Boxes ? CSS flexbox playground and code generation tool

muemmi · #7 (**permalink**) 04.04.2014, 14:53

ich probiere das mal aus und melde mich

muemmi · #8 (**permalink**) 04.04.2014, 19:32

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

Manfred62 · #9 (**permalink**) 04.04.2014, 19:57

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

muemmi · #10 (**permalink**) 04.04.2014, 20:36

@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..

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

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Weiße Schrift weiß drucken	renet	CSS	5	15.07.2009 20:58
[TYPO] Axel - eine neue Spiekermann et. al Schrift	andir	Grafik, Design, Typografie	0	13.06.2009 22:57
Helle Schrift auf dunklen Hintergrund	Mesh	(X)HTML	6	06.08.2007 20:31
skalierbare Schrift in IE / NN / FF / OP	siakone	CSS	17	10.05.2006 11:21
abstand unter schrift = 0	lomtas	CSS	6	10.04.2005 02:15