Issue #2032895 by balsama, yannickoo: Follow-up use better technique for vertical centering.

8.0.x
webchick 2013-08-31 00:07:28 -07:00
parent dedc7b504b
commit cb829e1906
2 changed files with 53 additions and 54 deletions

View File

@ -20,59 +20,56 @@
{{ scripts }}
</head>
<body class="install-page">
<div class="vertically-centered">
<div class="vertically-centered__inner">
<div id="page">
<div id="header">
{% if site_name %}
<h1 id="site-name">
<span>{{ site_name }}</span>
</h1>
{% endif %}
<div id="page">
<div id="header">
{% if site_name %}
<h1 id="site-name">
<span>{{ site_name }}</span>
</h1>
{% endif %}
{% if site_slogan %}
<div id="site-slogan">{{ site_slogan }}</div>
{% endif %}
{% if site_slogan %}
<div id="site-slogan">{{ site_slogan }}</div>
{% endif %}
{% if header %}
<div id="header-region">
{{ header }}
</div>
{% endif %}
{% if header %}
<div id="header-region">
{{ header }}
</div>
{% endif %}
</div> <!-- /header -->
</div> <!-- /header -->
<div id="container" class="clearfix">
<div id="container" class="clearfix">
{% if sidebar_first %}
<div id="sidebar-first" class="column sidebar">
{{ sidebar_first }}
</div> <!-- /sidebar-first -->
{% endif %}
{% if sidebar_first %}
<div id="sidebar-first" class="column sidebar">
{{ sidebar_first }}
</div> <!-- /sidebar-first -->
{% endif %}
<div id="content" class="column">
{% if title %}<h1 class="title" id="page-title">{{ title }}</h1>{% endif %}
{% if messages %}{{ messages }}{% endif %}
<div id="content-content" class="clearfix">
{{ content }}
</div> <!-- /content -->
<div id="content" class="column">
{% if title %}<h1 class="title" id="page-title">{{ title }}</h1>{% endif %}
{% if messages %}{{ messages }}{% endif %}
<div id="content-content" class="clearfix">
{{ content }}
</div> <!-- /content-content -->
</div> <!-- /content -->
{% if sidebar_second %}
<div id="sidebar-second" class="column sidebar">
{{ sidebar_second }}
</div> <!-- /sidebar-second -->
{% endif %}
{% if sidebar_second %}
<div id="sidebar-second" class="column sidebar">
{{ sidebar_second }}
</div> <!-- /sidebar-second -->
{% endif %}
</div> <!-- /container -->
</div> <!-- /container -->
<div id="footer-wrapper">
<div id="footer">
{% if footer %}{{ footer }}{% endif %}
</div> <!-- /footer -->
</div> <!-- /footer-wrapper -->
<div id="footer-wrapper">
<div id="footer">
{% if footer %}{{ footer }}{% endif %}
</div> <!-- /footer -->
</div> <!-- /footer-wrapper -->
</div> <!-- /page -->
</div>
</div>
</div> <!-- /page -->
</body>
</html>

View File

@ -29,23 +29,25 @@ body.install-page {
@media all and (min-width: 48em) { /* 768px */
html, body {
height: 100%;
text-align: center;
white-space: nowrap;
margin: 0;
}
.vertically-centered {
min-height: 100%;
display: table;
width: 100%;
}
.vertically-centered__inner {
display: table-cell;
padding: 70px 0;
width: 100%;
body:before {
content: '';
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
margin-right: -0.35em;
}
body.install-page #page {
display: inline-block;
vertical-align: middle;
text-align: left;
white-space: normal;
border-radius: 5px;
width: 75%;
margin: 0 auto;
max-width: 770px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
padding: 1em 2em 1em 0; /* LTR */