Oprettet tor. d. 05. juli 2012 kl. 21:30:59
Vertikal centrering af div med javascript
Hej alle eksperterJeg arbejder på en hjemmeside og vil gerne centrere en div vertikalt - vel at mærke en div uden fastsat højde, fordi mængden af tekst vil variere. Jeg vil gerne, at den let gennemsigtige div altid er vertikalt centreret helt uden i venstre side af skærmen - uanset skærmopløsning og viewport.
Jeg kan forstå, at det kan lade sig gøre at lave sådan en centrering med javascript og vil derfor spørge, om en af jer eksperter kan udvide det eksisterende javascript, så div'en altid står vertikalt centreret i venstre side af skærmen.
HTM: http://www.klarkommunikation.net/ (...)
JS: http://www.klarkommunikation.net/ (...)
:o) mcclaud
Skrevet fre. d. 06. juli 2012 kl. 06:39:46| #1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>eksperten</title>
<style type="text/css">
*{ margin: 0;padding: 0; }
html,body{ height: 100%; }
#container{
width: 480px;
height: 100%;
display: table;
position: relative;
background-color: #000;
}
#inner{
display: table-cell;
position: absolute;
top: 50%;
vertical-align: middle;
}
#content{
position: relative;
top: 50%;
color: #fff;
}
</style>
</head>
<body>
<div id="container">
<div id="inner">
<div id="content">Lorem ipsum dolor sit amet</div>
</div>
</div>
</body>
</html>
Lad mig dog slå fast at det ikke ligefrem er den bedste løsning, og som jeg skrev før, noget rod. Var det mig, ville jeg enten vælge en fast højde eller lade fx PHP udregne højden for mig.
(Det vigtige er markeret med rødt - resten er bare for eksemplets skyld.)
Skrevet fre. d. 06. juli 2012 kl. 15:55:21| #2
Helt enig med DeeDawg! Jeg har dog et bud på en tredie vej: At designe til den teknologi, man arbejder med.
Det hensyn skulle efter sigende den primære grund til, at Audi endnu ikke har lanceret fikse, ottekantede hjul *o)
/mvh
</bole>
Skrevet lør. d. 07. juli 2012 kl. 14:25:47| #3
Tak for bidraget DeeDawg og for kommentaren olebole... Hvis du smider et svar DeeDawg, så uddeler jeg med glæde points.
:o) mcclaud
Skrevet lør. d. 07. juli 2012 kl. 23:06:06| #4
Log ind
Seneste spørgsmål
Flere lightbox's fra samme script.
Åben link i nyt vindue.
Current menuitem
Seneste guides
Seneste nyheder
Tips & Tricks fra PC World
Fem smarte funktioner i din Mac som du sikkert ikke kender
Her har du fem muligheder for at tweake din Mac på en fed måde.
Anmeldelser fra PC World
Test: Samsung Galaxy S4 er et hit - trods gøglertricks
Kan Samsung beholde førertrøjen i det store Android-race? Galaxy S4 er smækfyldt med innovative funktioner, men også med en del gøgl. Er det for meget? Få vores dom over Samsungs nye topmodel.
Seneste blogindlæg
Tvangslukke spørgsmål: Hvad er den bedste løsning?
Hej Vi har mange åbne spørgsmål på Eksperten. Vi ville gerne tvangslukke dem - så et spørgsmål efter f.eks. 6 måneder lukkes. Men der er et par uklarheder som ville være gode at få lidt input til:...
Nyheder fra PC World
Ny opfindelse: Oplad din mobil på 20 sekunder
Måske er det snart slut med at lade mobilen op hver aften. Med ny opfindelse kan telefonen få fuld energi på sølle 20 sekunder.
Nyheder fra Computerworld
Galleri: De 10 vildeste datacentre i verden
I en gammel kirke, i et oppusteligt telt, på nedlagte militæranlæg eller midt i ørkenen. Der er ingen grænser for, hvor man kan banke et datacenter op. Her er de 10 sejeste anlæg i verden. I...
Udgiver · © 2013 IDG Danmark A/S · Hørkær 18 · 2730 Herlev · Tlf.: 77 300 300 · Fax: 77 300 301 · Brug af personoplysninger