CSS: vertically align DIV utfordring

[Egil Dybdal]

Trenger gode tips og råd her, etter utallige forsøk.

 

Holder på med en splash-screen / login-side til en nettside, hvor mine CSS ferdigheter ikke helt korresponderer med design ønskene mine.

 

 

Den store casen er at jeg sliter med å få dette midtstilt vertikalt (topp-bunn).

 

Forklaring til elementene:
Den blå linjen skal være slik den viser (med blå bakgrunn), en DIV som strekker seg 100% over skjermen (uten marger eller padding), og skal være plassert midt mellom topp/bunn på skjermen.
Den oransje firkanten er plassering av logo (plassert i egen DIV over den blå linjen). Logo har en høyde på 50px.
Den røde firkanten viser "området" hvor tekst, logo, input-felter og øvrig informasjon skal presenteres. Dette er tiltenkt i et område på 800px bredde sentrert på skjermen. Den røde linjen er kun en "hjelpelinje" nå og skal ikke være en del av designet.

 

Grunnen til at den røde firkanten er trukket nedenfor den blå linjen er for å kompensere for høyden på logoen (altså en DIV under den blå linjen med lik høyde som DIV'en til logoen). Kort fortalt: den røde firkanten skal ligge midt på skjermen.

 

Ble mye info og detaljer her.

 

Noen som har gode triks til hvordan man får sentrert dette med DIV's?

Endret 1. februar 2015 av Egil Dybdal

[Garanti]

Et forsøk:

http://jsfiddle.net/72or0jqe/

 

Litt problematisk med vertikal justering..

[Egil Dybdal]

Etter mye prøving og feiling gikk det seg til.

 

http://www.eyd.no/unibase/

Resultatet, for de interesserte. Tar gjerne i mot kritikk.

 

HTML kode:

<div class="wrapper-main">
<div class="wrapper-content">
<div class="wrapper-l"><img src="./graphics/logo_index.png" alt="uniBASE - LOGO"></div>
<div class="wrapper-c">
<div class="content">
<table width="800">
<tr>
<td></td>
<td style="width: 250px;" align="left">Brukernavn:</td>
<td style="width: 250px;" align="left">Passord:</td>
<td style="width: 100px;" align="left"></td>
<td></td>
</tr>
<tr>
<td></td>
<td style="width: 250px;" align="left"><input type="text" size="35"></td>
<td style="width: 250px;" align="left"><input type="password" size="35"></td>
<td style="width: 100px;" align="left"><input type="submit" value="Logg inn"></td>
<td></td>
</tr>
<tr>
<td></td>
<td style="width: 250px;" align="left"></td>
<td style="width: 250px;" align="left"><a href="#">Glemt passord</a></td>
<td style="width: 100px;" align="left"></td>
<td></td>
</tr>
</table>
</div>
</div>
<div class="wrapper-f">uniBASE - powered by APEX IKT AS - copyright © 2015</div>
</div>
</div>

 

CCS kode:

body
{
margin: 0;
}

 

.wrapper-main
{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 350px;
width: 100%;
}

 

.wrapper-content
{
margin: auto;
}

 

.wrapper-l
{
width: 100%;
height: 75px;
text-align: center;
}

 

.wrapper-c
{
width: 100%;
height: 200px;
background-color: #044B71;
text-align: center;
}

 

.content
{
width: 800px;
height: 200px;
margin: 0 auto;
padding-top: 65px;
font: 14px Arial;
color: #FFFFFF;
}

 

.content A:link
{
font: 10px Arial;
color: #FFFFFF;
text-decoration: none;
}

 

.content A:visited
{
font: 10px Arial;
color: #FFFFFF;
text-decoration: none;
}

 

.content A:active
{
font: 10px Arial;
color: #FFFFFF;
text-decoration: none;
}

 

.content A:hover
{
font: 10px Arial;
color: #FFFFFF;
text-decoration: underline;
}

 

.wrapper-f
{
width: 100%;
height: 75px;
text-align: center;
font: 10px Arial;
color: #044B71;
}

[etse]

flexboxer er laget for å løse litt av de problemene du har møtt på her - sammen med masse annet. Kan virkelig anbefale å se på det. Problemet er at det desverre ikke er støttet av alle browsere enda.