zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Schrift in einem Quatrat zentrieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.04.2014, 12:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2014
Beiträge: 10
muemmi befindet sich auf einem aufstrebenden Ast
Standard 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:
<div class="mm-leista1">

Test

</div>
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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.04.2014, 12:52
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 465
dazzle89 wird schon bald berühmt werden
Standard

Du könntest es mit display: table-cell und vertical-align: middle ausprobieren und position: absolute herausnehmen
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.04.2014, 13:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2014
Beiträge: 10
muemmi befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 04.04.2014, 13:18
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.142
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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>
Mit Zitat antworten
  #5 (permalink)  
Alt 04.04.2014, 13:26
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 465
dazzle89 wird schon bald berühmt werden
Standard

oder dem div einfach eine line-height von 140px geben, solange der text einzeilig bleibt
Mit Zitat antworten
  #6 (permalink)  
Alt 04.04.2014, 13:30
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.646
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 04.04.2014, 14:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2014
Beiträge: 10
muemmi befindet sich auf einem aufstrebenden Ast
Standard

ich probiere das mal aus und melde mich
Mit Zitat antworten
  #8 (permalink)  
Alt 04.04.2014, 19:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2014
Beiträge: 10
muemmi befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 04.04.2014, 19:57
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.142
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 04.04.2014, 20:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2014
Beiträge: 10
muemmi befindet sich auf einem aufstrebenden Ast
Standard

@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..
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:30 Uhr.