Notifikationer

Markér alle som læst Log ud

daniel_d Nybegynder

21. januar 2003 - 06:42 Der er 7 kommentarer og
1 løsning

centrering af DIV horizontalt og vertikalt uden brug af table ?

Damn... jeg har ledt den halve nat efter en script der kan centrere en <div>tekst</div> både horizontalt og vertikalt, men uden brug af tables.

Jeg har brug for at kunne angive en position ud fra center uden nødvendig brug af tables

nogen forslag... Jeg er i hvert fald blank

Mvh
Daniel D

Synes godt om

bearhugx Nybegynder

21. januar 2003 - 07:17 #1

du kan bruge align="center", hvis du kun skal centrer horisontalt
hvis det også (som det jo skal) centreres vertikalt, så bliver du nød til at lægge det i et layer og positionere absolut.

Synes godt om

medions Nybegynder

21. januar 2003 - 07:47 #2

altså <div align="center">tekst</div>.

Men i det det er tekst du arbejder med, fortrækker jeg du holder standarden, og styler din tekst med SPAN, taget...

<span style="text-align: center;">Tekst</span>

//>Rune

Synes godt om

callesen Praktikant

21. januar 2003 - 08:25 #3

Denne bruger jeg:
<html><head><title>css vertical center</title>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<style type="text/css">

</style>
</head>
<body>

<div class="outer">
i midten af siden

<div class="inner">
imidten af div'en
</div>

</div>

</body>
</html>

Synes godt om

daniel_d Nybegynder

21. januar 2003 - 11:39 #4

jeg har desværre ikke tid til at teste det nu, men det skal ikke kun være en IE-ting.
IE, NS, og helst også opera

Mvh
Daniel

Synes godt om

daniel_d Nybegynder

21. januar 2003 - 13:47 #5

Callesen> Den er på rette vej. Ser fint ud i IE. I opera er inner div ikke helt i midten. Har ikke testet NS, men det vil jeg gøre om lidt...
Kan du forklare mig hvorfor Opera ikke viser det korrekt?

Mvh

Synes godt om

daniel_d Nybegynder

21. januar 2003 - 13:54 #6

Dog kan jeg ikke helt li dit css, da det kræver angivelse af en fast størrelse på div'en og ikke i %'er

Måske et script der finder
window.size.vertikalt/2=bredde
window.size.horizontalt/2=hojde

Men så er problemet at hvis man laver en div vil den ikke blive centreret, men derimod få venstre øverste hjørne i center...

???

Synes godt om

daniel_d Nybegynder

21. januar 2003 - 13:59 #7

Fandt svaret her:
http://users.cybercity.dk/~dsl58854/articles/centrering/readme.html

en udemærket side om emnet.

til dig callesen. Tak for hjælpen.

Mvh

Synes godt om

daniel_d Nybegynder

21. januar 2003 - 14:18 #8

Til den downe er her et copy-paste eksempel på hvordan man centrer og placerer forskellige lag i forhold til midten. Eksemplet er med udgangspunkt i ovennævnte URL:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Horisontal og Vertikal Centrering via CSS og JS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
margin:0px; padding:0px;

}
dt {font-weight:bold;}
#center {
padding:0px;

width:1px;
height:1px;

position:absolute;
}
</style>

<script type="text/javascript">

function posCenter() {
if (self.innerWidth)
{
frameWidth = self.innerWidth;
frameHeight = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth)
{
frameWidth = document.documentElement.clientWidth;
frameHeight = document.documentElement.clientHeight;
}
else if (document.body)
{
frameWidth = document.body.clientWidth;
frameHeight = document.body.clientHeight;
}

oCenter = document.getElementById('center');
oCenterWidth = oCenter.offsetWidth;
oCenterHeight = oCenter.offsetHeight;

nW=Math.round((frameWidth/2)-(oCenterWidth/2));
nH=Math.round((frameHeight/2)-(oCenterHeight/2));

oCenter.style.left=nW+'px';
oCenter.style.top=nH+'px';
}

isOpera = (window.opera);
var origWidth,origHeight;

function handlerLoad() {
if (isOpera) {
origWidth = this.innerWidth;
origHeight = this.innerHeight;
handlerResize();
}
posCenter();
}

function handlerResize() {
if (this.innerWidth != origWidth
||
this.innerHeight != origHeight) location.reload();
if (isOpera) setTimeout('handlerResize()',500);
posCenter();
}

window.onresize = handlerResize
window.onload = handlerLoad
</script>

</head>

<body>
<div id="center"><b>.</b>
<div style="position:absolute; top:0; left:-50; width: 100px;">(0,-50)</div>
<div style="position:absolute; top:50; left:-50; width: 100px;">(50,-50)</div>
<div style="position:absolute; top:200; left:100; width: 100px;">(200,100)</div>
</div>
</body>
</html>

mvh

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS