Avatar billede fizk Nybegynder
31. juli 2006 - 19:23 Der er 8 kommentarer og
1 løsning

Tekst i midten af <div>?

Jeg har prøvet at lave en <div> der er 120px høj og 120px bred.
Jeg har så taget et billede og lagt det ind i denne <div>. Billedet er imidlertid kun 90px gange 90px.
Det jeg så gerne vil have gjort, er så billedet kommer til at ligge i midten (både horisontalt og vertikalt). Jeg har brugt en text-align:center og har forsøgt mig med vertical-align:middle, som jeg ville mene skulle kunne centere den lodret, men dette ser ikke ud til at være tilfældet.

Nogen der har en alternativ kode, eller et svar på hvordan det skal gøres?
Avatar billede nielle Nybegynder
31. juli 2006 - 19:27 #1
Hvis du lægger billedet ind som baggrund i din div så kan den centreres rimeligt nemt...
Avatar billede nielle Nybegynder
31. juli 2006 - 19:31 #2
<div style="background-image: url(ditBillede.jpg); background-repeat: no-repeat; background-position: center center;">
</div>
Avatar billede mclemens Nybegynder
31. juli 2006 - 19:32 #3
<div style="width:120px;height:120px;position:relative;"><img src="billede.jpg" style="position:absolute;top:50%;left:50%;margin-left:-45px;margin-top:-45px;"></div>
Avatar billede mclemens Nybegynder
31. juli 2006 - 19:48 #4
Hvis du skal have centreret noget tekst ovenpå billedet kan nielle's udvides til det her:


<div style="background: url(ditBillede.jpg) no-repeat center;width:120px;height:120px;position:relative;"><div style="height:20px;width:100%;position:absolute;top:50%;margin-top:-10px;text-align:center;">Center</div></div>
Avatar billede fizk Nybegynder
01. august 2006 - 07:02 #5
Hmmm ... Havde nu håbet der var en lidt lettere løsning =/
Nå, men jeg bruger mclemens løsning da Google ikke er så glad for at indexere baggrundsbilleder ;)
Avatar billede mclemens Nybegynder
01. august 2006 - 08:51 #6
Ok :o)
Avatar billede mclemens Nybegynder
01. august 2006 - 08:56 #7
Hvis nu tekst skal placeres ovenpå billedet
senere kan det gøres med noget i denne stil:

<div style="width:120px;height:120px;position:relative;border:1px solid #000;"><img src="billede.jpg" style="position:absolute;top:50%;left:50%;margin-left:-45px;margin-top:-45px;"><div style="position:absolute;top:50%;width:100%;height:20px;margin-top:-10px;text-align:center;">Center</div></div>

(hvis billedet skal være et img og ikke en baggrund
- ellers så er 31/07-2006 19:48:37 lettere)
Avatar billede mclemens Nybegynder
01. august 2006 - 09:20 #8
((( eller med en table... det gør det lidt mere dynamisk da man ikke skal tænke på billedets str. ved centrering inde i td'en...
<div style="float:left;position:relative;"><table style="border:0px;border-collapse:collapse;width:120px;height:120px;text-align:center;"><tr><td><img src="billede.jpg"><div style="position:absolute;top:50%;left:0px;height:20px;width:100%;margin-top:-10px;">center</div></td></tr></table></div> )))
Avatar billede mclemens Nybegynder
02. august 2006 - 10:39 #9
Tak for point :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