Vertical-align

Nördy · #1 (**permalink**) 22.06.2015, 19:16

Heyh Leute ich habe ein sehr kleines Problem und es kann auch sein das es an meinem Browser liegt aber wie zentriert man einen Text nochmal vertical?
Das geht doch eig so:

HTML-Code:

<p style="vertical-align:center">Mitte</p>

oder anstatt das center middle aber das funzt nicht!
Es passiert einfach nichts
Könnt ihr mir helfen?
MFG Daniel

MrMurphy · #2 (**permalink**) 22.06.2015, 19:56

Hallo,

vertikales Zentrieren ist für die Informationsübertragung nicht erforderlich. Deshalb bestimmt im Regelfall der Inhalt die Höhe von Elementen.

Deshalb war bis CSS 2.1 vertikales Zentrieren nur in

a) Tabellen (table-Element) und

b) in der Tabellenansicht (display: table)

möglich.

Mit CSS3 ist zusätzlich noch als Drittes das Flexbox-Modell hinzugekommen.

Gruss

MrMurphy

Nördy · #3 (**permalink**) 22.06.2015, 20:15

Okay danke schonmal kennst du eine Seite wo das mit dem Flexbos modell gut erklärt wird?

MrMurphy · #4 (**permalink**) 22.06.2015, 20:39

Hallo

Zitat:

gut

Nein. Die Erklärungen, die ich bislang gefunden haben, sind leider eher oberflächlich. In der Regel wird viel zuwenig auf die

a) Grundlagen und

b) Probleme

eingegangen. Es werden mehr oder weniger nur Standardlösungen präsentiert, die mit der Realität recht wenig zu tun haben. Zudem wurde Flexbox mehrfach grundsätzlich überarbeitet und das das Web nie vergisst kursieren auch noch Anleitungen zu den veralteten Lösungen.

Du kannst dir ja mal folgende Infos anschauen:

CSS3 Flexbox Tipps Tutorial Anleitung

Das Modell der flexiblen Boxen

Einführung in das Flexbox-Modell von CSS | kulturbanause® blog

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

oder folgendes Video mit seinen Nachfolgenden

https://www.youtube.com/watch?v=xyLa8LNIKjg

oder folgende englischsprachige Videos

https://www.youtube.com/watch?v=RSriXZSt0-c

https://www.youtube.com/watch?v=D-cWTumhSEU

Gruss

MrMurphy

etux · #5 (**permalink**) 23.06.2015, 14:22

Zitat:

Zitat von Nördy

Das geht doch eig so:

HTML-Code:

<p style="vertical-align:center">Mitte</p>

oder anstatt das center middle aber das funzt nicht!

Wenn schon dann „vertical-align: middle;“.
Es kann auf den Inhalt von Tabellen-Zellen (s. MrMurphy) aber auch auf Inline-, bzw. Inline-Block-Elementen.
In Deinem Fall

HTML-Code:

<p style="display: inline-block; vertical-align: middle">Mitte</p>

Voraussetzung ist allerdings, dass das Element Spielraum in vertikaler Richtung hat.

Nördy · #6 (**permalink**) 23.06.2015, 18:29

Das mit dem Inline Block funktioniert auch nicht!:/

Ich zeige euch mal den ganzen Code:

HTML-Code:

<html>
	<head>
		<title>Daniel</title>
		<style>
		html, body {
		margin:0;
		padding:0;
		}
header {
   position: relative;
   height:100%;
   min-height:100%;
   width: 100%;
   background: url(./img/start.jpg) no-repeat top center;
   background-size: cover !important;
	-webkit-background-size: cover !important;
   text-align: center;
   overflow: hidden;
}
a.scrollstart{
	border-color:red;
	width:30px;
	height:30px;
}
a{text-decoration:none;}
</style>
	</head>
	<body>
		<header>Welcome<br/>
				<div><a href="#second" class="scrollstart">^^</a></div>
				<p style="display: inline-block; vertical-align: middle">Mitte</p>
		</header>
		<section id="second">
			<p>hey</p>
		</section>
	</body>
</html>

Ich habe wahrscheinlich irgendwo einen dummen Fehler aber cih finde ihn nicht...

MrMurphy · #7 (**permalink**) 23.06.2015, 19:12

Hallo,

deinen Angaben ist leider nicht zu entnehmen was wie vertikal zentriert werden soll.

Mit deinem Qelltext erscheint mehr oder weniger nur eine fast leere Seite. Die hilft auch nicht weiter. Und wie soll sich die Seite verhalten wenn mehr Inhalt hinzukommt? Oder die Besucher kleinere Fenster als du haben?

Insgesamt denke ich das du leider etwas unrealistische Vorstellungen von den Möglichkeiten von HTML und CSS hast, so das es für deine Vorstellung keine Lösung gibt.

Gruss

MrMurphy

Nördy · #8 (**permalink**) 23.06.2015, 19:53

Zitat:

Zitat von MrMurphy

Insgesamt denke ich das du leider etwas unrealistische Vorstellungen von den Möglichkeiten von HTML und CSS hast, so das es für deine Vorstellung keine Lösung gibt.

Nein echt nicht... Ich habe das schon auf anderen Seiten so gesehen aber finde gerade nicht welche das waren

Wenn die Leute einen anderen Bildschirm haben, arbeite ich noch mit Media Query's
Also ihc mach die Seite noch responsive

Ich möchte das ein Satz in der Mitte des Bildschirm steht
quasie mitte mitte
Das was ich da gerade stehen habe ist einfach nur so...

Nördy · #9 (**permalink**) 23.06.2015, 19:59

Bei der ist die Schrift da wo ich sie auch haben will.

Nördy · #10 (**permalink**) 23.06.2015, 20:10

Reintheoretisch könnte man das auch mit:

Code:

#dieKlasse{
 top:50%;
 left:50%;
}

aber jenachdem wie lang der Text ist geht das nciht genau aber ich will das genau.

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
vertical geteiltes Design	emmis	CSS	7	24.11.2009 09:42
<DT>1. align links, 2. align rechts</DT>	amasingh	CSS	7	27.10.2009 10:21
vertical textausrichtung	Holger (HMR)	CSS	1	10.06.2008 14:08
Verical align bei Divs geht nicht	cross_site_script	CSS	4	04.06.2007 07:33
Vertical Align im DIV Tag (FLOAT)	Tino Schneider	CSS	2	29.09.2004 13:31