---

Hvordan fåe man en boks til at være lige i midten både lodret og vandret med
css?

Har lavet en div til boksen..

mvh

Karina

---

Karina[6000] wrote:
> Hvordan fåe man en boks til at være lige i midten både lodret og
> vandret med css?
>
> Har lavet en div til boksen..

Hvis boksens størrelse er fast (mao. den ikke ændres afhængigt af
indholdet), kan denne metode bruges:

<style>
#boks {
position: absolute;
width: 400px;
height: 300px;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
background-color: red;
}
</style>

<div id="boks">indhold...</div>


--
Mvh René Lønstrup
min web: http://www.rel7star.dk?r=usenet
min email: se om du kan regne dén ud..

---

> Hvis boksens størrelse er fast (mao. den ikke ændres afhængigt af
> indholdet), kan denne metode bruges:
>
> <style>
> #boks {
> position: absolute;
> width: 400px;
> height: 300px;
> left: 50%;
> top: 50%;
> margin-left: -200px;
> margin-top: -150px;
> background-color: red;
> }
> </style>
>
> <div id="boks">indhold...</div>
>
>


Hejsa.. kan ikke rigtigt bruge den.. hvis man ændre størrelse på boksen
bliver den ikke ved med at være centreret.. andre bud?

---

Karina[6000] wrote:
> Hejsa.. kan ikke rigtigt bruge den.. hvis man ændre størrelse på
> boksen bliver den ikke ved med at være centreret.. andre bud?

Når du ændrer på boksens størrelse, gør du det så ved at ændre på 'width' og
'height' i stylesheet'et, eller sker det ved at fylde mere indhold i boksen
(så det er indholdet der bestemmer størrelse)?
Er det det første, skal du bare ændre på 'margin-left' og 'margin-top' også.
Begge skal stå til halvdelen af hhv. width og height, bare som negativt tal.
Er width f.eks. 300px skal margin-left være -150px og er height 248px skal
margin-top være -124px og så fremdeles.

Men er det indholdet der bestemmer størrelsen, virker ovenstående rigtigt
nok ikke, og så er jeg ikke sikker på at det kan lade sig gøre med brug af
kun html/css. Så bliver du nok nødt til at scripte dig ud af det, vha.
javascript.


--
Mvh René Lønstrup
min web: http://www.rel7star.dk?r=usenet
min email: se om du kan regne dén ud..

---

René Lønstrup skrev:

> Hvis boksens størrelse er fast (mao. den ikke ændres afhængigt af
> indholdet), kan denne metode bruges:

Metoden med negativ margen er den mindst ringe løsning til lodret
centrering. Den fungerer og validerer, men kan give problemer med
små browservinduer og den kræver at man kender højden på forhånd.

Til vandret centrering er der ingen grund til at benytte negativ
margen - det kan klares med margin: auto; samt (hvis man vil have
IE<6 med) en wrapper med text-align: center.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

René Lønstrup wrote:

>> Hvordan fåe man en boks til at være lige i midten både lodret og
>> vandret med css?
>> Har lavet en div til boksen..
> Hvis boksens størrelse er fast (mao. den ikke ændres afhængigt af
> indholdet), kan denne metode bruges:

.... hvilket kræver at brugeren benytter *præcis* samme fonte, samme
font-størrelser, samme opløsning og samme browser som designeren?

Da jeg selv kører et andet OS end Windows, bruger en anden browser en IE og
har en opløsning der er større end "1024x768" og jeg har sat
font-størrelser til *læsbar* er det *drønirriteren* at ramle ind i sådan en
side med "everything fixed!"... oplevelsen bliver fra grim til ulæselig.

Mht. font-størrelse... så kan man selvfølgelig sikre sig ved at lave en
"font-size: 9px"... og give fingeren til alle brugere som ikke køre
"1024x768" men størrer...

.... bare et surt opstød og et hint om at "fixed" ikke er smart i
webdesign...

Bjarne

---

Karina[6000] skrev:

> Hvordan fåe man en boks til at være lige i midten både lodret
> og vandret med css?

Vandret er ganske enkelt (i nyere browsere) - sæt en bredde på
mindre end 100% og sæt venstre/højre-margen til auto:

Fx som her:

body{
   width: 750px;
   margin-left: auto;
   margin-right: auto;
}

- eller med procentangivelse:

body{
   width: 80%;
   margin-left: auto;
   margin-right: auto;
}

IE 6 skal formentlig i standardmode for at tolke det korrekt. Søg
på Google eller i gruppen her efter doctype switching for at se
mere om hvordan det gøres. Ældre IE'er kan komme med via et hack -
det kan andre sikkert hjælpe med.

Lodret centrering er ikke muligt uden krumspring. Hvis man ikke
kender højden af boksen (og dermed kan bruge det trick Rene har
vist) er man så vidt jeg husker henvist til javascript.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html