XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Text horizontal und vertikal auf Seite zentriert (http://xhtmlforum.de/showthread.php?t=71614)

web334 02.01.2015 12:34

Text horizontal und vertikal auf Seite zentriert
 
Guten Tag

ich möchte einen Text sowohl horizontal als auch vertikal zentriert anzeigen, aber das funktioniert leider nicht (Beispiel: Fotos 2014 ).
Bei dem div, in dem sich der Text befindet, habe ich die Breite und Höhe mit jeweils 100 % angegeben, aber das wird leider ignoriert. Wieso?
Gebe ich die Breite und Höhe in Pixel an, so funktioniert es (Beispiel: Fotos 2014 ), aber dadurch ist der Text eben nicht horizontal und vertikal auf der Seite zentriert.
Zur Veranschaulichung habe ich als Hintergrundfarbe vom DIV, in dem sich der Text befindet, schwarz gewählt.

Manfred62 02.01.2015 12:53

http://css-tricks.com/centering-css-complete-guide/
Absolute Horizontal And Vertical Centering In CSS - Smashing Magazine
Z63 | Vertical align anything with just 3 lines of CSS | zerosixthree

Manfred62 02.01.2015 18:17

hier eine Demo mit der letzten Methode:
HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
        <meta charset="utf-8">
        <title> Fotos 2014 </title>
        <style type="text/css">
        * {
                border: 0;
                margin: 0;
                padding: 0;
        }
        html, body, #global, #page {
                height: 100%;
                width: 100%;
        }
        body {
                font: 100%/1.6 sans-serif;
                color: #FFF;
                background: #000 url(bg.jpg) center no-repeat;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
        }
        #global {
                background-color: rgba(0, 0, 0, 0.5);
        }
        #page {
                position: relative;
        }
        h1 {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 48px;
                font-weight: normal;
                background: #000;
                padding: 20px 50px;
        }
        </style>
</head>
<body>
        <div id="bg"></div>
        <div id="global">
                <div id="page">
                        <h1>Fotos 2014</h1>
                </div>
        </div>
</body>
</html>


web334 03.01.2015 11:11

Zitat:

Zitat von Manfred62 (Beitrag 542710)
hier eine Demo mit der letzten Methode:
HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
        <meta charset="utf-8">
        <title> Fotos 2014 </title>
        <style type="text/css">
        * {
                border: 0;
                margin: 0;
                padding: 0;
        }
        html, body, #global, #page {
                height: 100%;
                width: 100%;
        }
        body {
                font: 100%/1.6 sans-serif;
                color: #FFF;
                background: #000 url(bg.jpg) center no-repeat;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
        }
        #global {
                background-color: rgba(0, 0, 0, 0.5);
        }
        #page {
                position: relative;
        }
        h1 {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 48px;
                font-weight: normal;
                background: #000;
                padding: 20px 50px;
        }
        </style>
</head>
<body>
        <div id="bg"></div>
        <div id="global">
                <div id="page">
                        <h1>Fotos 2014</h1>
                </div>
        </div>
</body>
</html>



Hallo Manfred
viel herzlichen Dank für das Beispiel und die Links!
Die Demo ist genau das, was ich gesucht habe.
Auch die Methode im ersten Link ist klasse.
Vielen vielen Dank!

etux 03.01.2015 18:46

Im ersten Beispiel
Fotos 2014
hast Du schon fast alles richtig.
Nur „vertical-align“ bei #page kann so nicht greifen.
vertical-align → Inline-Blocks, (CSS-)Tables.

Beispielsweise bräuchte #page ein „display: table-cell;“ und #global ein „display: table;“.


Nachtrag:

Habe mir kurz die Beispiele auf
http://css-tricks.com/centering-css-complete-guide/
angeschaut: Element mit unbekannter Höhe vertikal Zentrieren → Position „absolute“, Flexbox.

So kann man das auch machen. Allerdings nur wenn man sicher ist, dass der Inhalt nie höher als das Browser-Fenster wird.
Wenn doch, dann ist der obere Teil des Inhalts unerreichbar → kein Scrollen möglich.

web334 04.01.2015 14:00

Zitat:

Zitat von etux (Beitrag 542721)
Beispielsweise bräuchte #page ein „display: table-cell;“ und #global ein „display: table;“.


bei #page hatte ich das „display: table-cell;“ schon.
bei #global habe ich nun ergänzt: „display: table;“ und es funktioniert nun! Danke!


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:14 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023