Wie können Elemente in der Zurb-Stiftung vertikal zentriert werden?
Baue ich ein login-Formular und ich möchte, dass die Felder Benutzername und Kennwort ein Quadrat in der Mitte des Bildschirms. Ich bin auch mit dem Zurb Foundation-Paket zu bauen, diese form. Ich bin eine Menge ärger Zentrierung Dinge, vertikal.
Hier ist mein code:
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/-->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>
Registration
</title>
<!-- Included CSS Files (Compressed) -->
<link rel="stylesheet" href="stylesheets/foundation.min.css">
<link rel="stylesheet" href="stylesheets/app.css">
<link rel="stylesheet" href="stylesheets/main.css">
<script src="javascripts/modernizr.foundation.js"></script>
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<nav class="top-bar">
<ul>
<li class="name"><h1><a href="#">Title</a></h1></li>
<li class="toggle-topbar"><a href="#"></a></li>
</ul>
<section>
<ul class="left">
<li><a href="#">Link</a></li>
</ul>
<ul class="right">
<li><a href="#">Link</a></li>
</ul>
</section>
</nav>
<body>
<div class="row" id="parent">
<div class="six columns" id="child">
<form id = "register">
<input type="text">
</form>
</div>
</div>
<script src="javascripts/jquery.foundation.topbar.js"></script>
<!-- Included JS Files (Compressed) -->
<script src="javascripts/jquery.js"></script>
<script src="javascripts/foundation.min.js"></script>
<!-- Initialize JS Plugins -->
<script src="javascripts/app.js"></script>
</body>
</html>
Und einige CSS, die ich habe rumprobiert, aber habe nicht bekommen, um zu arbeiten, dennoch:
body {
/*background-image: url('../images/gplaypattern.png');*/
background: red;
}
#register {
background-color: black;
width:80%;
}
#parent {
position: absolute;
left: 50%;
top: 50%;
height: 80px;
}
#child {
height: 75px;
position:absolute;
top: 50%;
background: green;
}
Wierdly, wenn ich die Höhe etwas zu dynamisch (d.h. height: 30%;
) es funktioniert nicht, warum?
InformationsquelleAutor der Frage SimaPro | 2012-10-21
Du musst angemeldet sein, um einen Kommentar abzugeben.
UPDATE
Diese Funktion wird als Komponente (xy-center) in einer zukünftigen version die Stiftung. Mehr details auf Github.
Wenn Sie eine ältere version von Foundation, über die CSS-Tricks zentrierungsart wird horizontal und vertikal zentrieren Sie die sign-in-Formular mit einer minimalen Menge von CSS/HTML-markup.
HTML
CSS
Ergebnis
Zeichen-in form bleiben wird vertikal zentriert und horizontal, unabhängig von der Auflösung. Hier ist ein screenshot von dem Ergebnis.
Und die arbeiten jsFiddle
InformationsquelleAutor der Antwort Brett DeWoody
Stiftung nicht handhaben vertikale Ausrichtung gut: https://github.com/zurb/foundation/issues/411.
Können Sie Ungefähre Angaben es mit vertikalen Polsterung, aber es gibt keine saubere Möglichkeit um ihn herum für dynamische Inhalte.
Den folgenden jsFiddle (nicht von mir erstellt) zeigt, wie es funktionieren sollte mit
http://jsfiddle.net/53ALd/6/ - aber es wird nicht in Verbindung mit dem rest der Foundation-CSS.
InformationsquelleAutor der Antwort Sinister Beard
Das problem ist, dass HTML/CSS nicht wirklich umgehen vertikale Zentrierung. Zurb ' s Foundation ist nicht zu helfen oder Schaden Sie in dieser Hinsicht.
Sehen das sehr ähnlich Frage Erstellen einer vertikal und horizontal zentriert, html div
InformationsquelleAutor der Antwort Ed Charbeneau