Avatar billede goose Nybegynder
06. september 2007 - 10:26 Der er 5 kommentarer og
1 løsning

Placering af billede i div - centreret hori og verti

Hvis man har en div med en class der ser således ud:

.galleri{
width:110px;
height:110px;   
text-align:center;
background-color:#E4E1CB;
border-width: 1px 1px 1px 1px;
border-style:solid;
border-color:#FFFFFF;
}

- hvordan får man så indholdet til at være centreret vertikalt også?

Jeg har nogle billeder som enten er 100 pixels høje eller 100 pixels bredde og disse skal placeres midt i div'en.

Afhængigt af skærmopløsningen, skal rækken af div'er fortsætte på næste linie, altså ligesom tekstomløb.

Jeg har nu brugt så meget tid på det, så jeg er nød til at have noget hjælp :o/

/Goose
Avatar billede darrich Novice
06. september 2007 - 10:39 #1
det vil være en god ide også at hæfte din html kode ind, så man kan se helheden eller et link til din side/test side, hvor man se problemet.
Avatar billede darrich Novice
06. september 2007 - 10:49 #2
Et par muligheder er:

a. sætte line-height til samme højde som "container" højden.

b. brug af position:absolute
Avatar billede goose Nybegynder
06. september 2007 - 13:08 #3
Jeg har snart prøvet så meget forskelligt så jeg er helt rundtosset.

Jeg har forsøgt at visualiserer det jeg ønsker på http://www.goose.dk/kasser.jpg

Jeg kan ikke rigtigt få hverken forslag a eller b til at se ordentligt ud, men jeg gør nok et eller andet galt.

/Goose
Avatar billede goose Nybegynder
06. september 2007 - 13:08 #4
om det bliver lavet i div eller tabeller er underordnet, bare resultatet bliver som på billedet.

/Goose
Avatar billede goose Nybegynder
06. september 2007 - 15:33 #5
Nå, jeg fik det løst på en "husmandsmåde" ved, at lave en div i fast bredde og højde, floate den left og i denne div ligge en tabel som er 100% og og bred og så centrere indholdet ....

Måske ikke optimalt, men det virker ;o)

Du får point som tak for interessen.

/Goose
Avatar billede darrich Novice
10. september 2007 - 08:36 #6
tak :o)
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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