Mit Bootstrap in Mitte von Bildschirm zentrieren

kadehi · #1 (**permalink**) 29.07.2013, 11:58

Hallo,

auf einer Seite möchte ich ein Formular auf dem Bildschirm zentriert (oben, unten, rechts, links) darstellen.

Dies soll auch auf einem Smartphone und auf einem Tablett so sein.

Ich verwende Bootstrap.
Dort habe ich span4 verwendet, um das Bild und das Formular zumindest schon einmal horizontal zu zentrieren.

Jetzt fehlt noch das vertikale Zentrieren. Hier weis ich leider nicht weiter.
Kann mir da jemand helfen?

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Titel</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<link href="/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="/css/style.css" media="screen" rel="stylesheet" type="text/css">
<link href="/css/bootstrap-responsive.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="/css/login.css" media="screen" rel="stylesheet" type="text/css">
<link href="/img/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
<!-- Scripts -->
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<!--[if lt IE 9]><script type="text/javascript" src="/js/html5.js"></script><![endif]-->
</head>
<body>
	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container">
				<button type="button" class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse">
					<span class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="brand" href="#">Projektname</a>
				<div class="nav-collapse collapse">
					<ul class="nav">
						<li class="active"><a href="#">Startseite</a></li>
					</ul>
				</div>
				<!--/.nav-collapse -->
			</div>
		</div>
	</div>

	<div class="container">
		<div class="container-fluid login">
			<div class="row-fluid">
				<div class="span4">&nbsp;</div>
				<div class="span4">
					<div align="center">
						<img alt="bild" src="/img/bild.jpg">
					</div>
					<form action="">
						<input type="text" class="input-block-level" id="focusedInput" placeholder="">
						<div align="center">
							<button class="btn btn-medium" type="submit">suchen</button>
						</div>
					</form>
				</div>
				<div class="span4">&nbsp;</div>
			</div>
		</div>
	</div>
	<!-- /container -->

</body>
</html>

Danke bereits im Voraus.

explanator · #2 (**permalink**) 29.07.2013, 13:25

Lies mal hier: CSS: horizontale und vertikale Zentrierung

kadehi · #3 (**permalink**) 29.07.2013, 13:47

Danke zunächst. Ich habe es gelesen, aber das hilft mir nicht weiter.

Ich möchte den Inhalt von <div class="container-fluid login"> auf allen Devices immer in der Bildschirmmitte darstellen.

programm · #4 (**permalink**) 29.07.2013, 13:56

Hat der Container eine feste Breite und Höhe? Dann könnte man eventuell mit position absolute arbeiten, das wäre meine erste Idee. Ansonsten wäre da natürlich noch die Option, ein kleines JavaScript einzusetzen.

explanator · #5 (**permalink**) 29.07.2013, 14:03

Zitat:

Zitat von kadehi

Danke zunächst. Ich habe es gelesen, aber das hilft mir nicht weiter.

Ich möchte den Inhalt von <div class="container-fluid login"> auf allen Devices immer in der Bildschirmmitte darstellen.

Und bei dem verlinkten Beitrag ist angegeben wie du das machen musst.

Javascript ist hier nicht nötig.

kadehi · #6 (**permalink**) 29.07.2013, 14:28

@programm
Das habe ich bereits versucht, und das klappt auch bedingt.
Allerdings wird das nicht bei jedem Device sauber dargestellt.

@explanator
Ich finde nichts auf der Seite, was funktioniert.
Vielleicht bin ich ja blind

explanator · #7 (**permalink**) 29.07.2013, 14:35

Abschnitt: "Einen Block oder Bild vertikal zentrieren"
Unten auf der Seite.

Dem Div mit CSS display:tablecell mitgeben und dann mit vertical-align: middle
das veritkale zentrieren vornehmen.

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
CSS-Seite horizontal und vertikal zentrieren!	Boof	CSS	20	05.02.2010 12:23
Seite halbieren - Oben bis Mitte, Mitte bis Unten	Felixus	CSS	6	19.10.2008 19:32
DIV immer ganze Breite - normal?!?!?	csski	CSS	3	02.07.2008 12:20
wie kirege ich den text der box in die mitte	puma	CSS	3	15.05.2007 14:17
Holy Grail und der Internet Explorer!	ONeill	CSS	23	01.06.2006 18:20