zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Text horizontal und vertikal auf Seite zentriert

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.01.2015, 11:34
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 02.01.2007
Beiträge: 241
web334 befindet sich auf einem aufstrebenden Ast
Standard 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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.01.2015, 11:53
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.141
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.01.2015, 17:17
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.141
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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>
Mit Zitat antworten
  #4 (permalink)  
Alt 03.01.2015, 10:11
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 02.01.2007
Beiträge: 241
web334 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Manfred62 Beitrag anzeigen
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!
Mit Zitat antworten
  #5 (permalink)  
Alt 03.01.2015, 17:46
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 629
etux wird schon bald berühmt werden
Standard

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.
__________________
Grüße: Emil
--------------------------------------
http://emil-webdesign.net/

Geändert von etux (03.01.2015 um 18:22 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 04.01.2015, 13:00
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 02.01.2007
Beiträge: 241
web334 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von etux Beitrag anzeigen
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!
Mit Zitat antworten
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
Navigations-Leiste wird nicht richtig angezeig. vaporizzle CSS 5 05.02.2014 16:29
Hintergrund wird nicht angezeigt maxx CSS 6 14.10.2012 18:27
Wachsende Container Andy CD CSS 13 10.02.2010 13:08
gibt es eine andere Lösung ohne Tabelle? online CSS 16 24.04.2009 08:41
bild über 2 div-tags positionieren MoJo CSS 7 12.06.2006 16:48


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:06 Uhr.