XHTMLforum - Schrift in einem Quatrat zentrieren

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Schrift in einem Quatrat zentrieren (http://xhtmlforum.de/showthread.php?t=70814)

muemmi

04.04.2014 12:18

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:

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

04.04.2014 12:52

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

muemmi

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

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

04.04.2014 13:26

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

explanator

04.04.2014 13:30

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

muemmi

04.04.2014 14:53

ich probiere das mal aus und melde mich

muemmi

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

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

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

Alle Zeitangaben in WEZ +2. Es ist jetzt 11:26 Uhr.