Avatar billede extream Nybegynder
22. september 2005 - 10:38 Der er 4 kommentarer

background-color problem i div tag

Jeg har et div tag hvor et billede skal centreres i midten. Men når jeg bruger padding til at centrer vertical ryger baggrundsfarven også, hvordan kan jeg undgå dette?

kode:
#AWToolBox{padding: 11 0px; text-align: center;}
.color1{background-color: #6D94B1; height: 100%;}

<div id="AWToolbox"><div class="color1">
<a href="/"><img height="10" alt="Gå til forsiden" src="/images/demo/home.gif" width="24" border="0"/></div></div>
Avatar billede saudoo Nybegynder
22. september 2005 - 14:57 #1
du kan vel bare bruge vertical-align

http://www.w3schools.com/css/pr_pos_vertical-align.asp
Avatar billede olebole Juniormester
22. september 2005 - 16:28 #2
<ole>

saudoo >> Nej, ikke med den kode ... linket er jo et inline-element, der tilpasser sin højde i forhold til indholdet  ;o)

- men din CSS giver ikke mening. Du kan ikke sætte et elements højde til 100%, uden at sætte en højde på elementets omkransende element  :)

/mvh
</bole>
Avatar billede extream Nybegynder
23. september 2005 - 08:15 #3
Ahh tænk ikke på den højde det er en fejl. men hvis jeg bruger background-color i den første div så ser det ok ud. Men vil gerne have så jeg kan skifte baggrundsfarven et sted, men det er nok ikke muligt.
Avatar billede bjoarn Nybegynder
25. september 2005 - 03:27 #4
vertical-align er ikke svaret (den bruges til at justere billedet i forhold til tekst).
Højde i % har kun virkning hvis et omsluttende element har angivet en præcis højde (i px, pt, em osv). Dvs. at hvis der er et omsluttende element til AWToolbox har en præcis højde kan du bruge den oplysning til at fake en vertikal centrering. (hvilket ikke findes som mulighed i css)
Fx. hvis billedet er i en box der er 20px høj og billedet er 10px, så sætter man en top-margin på 5px, så vil billedet se vertikal centreret ud.

/* html */
<div id="AWToolbox">
<img src="/images/demo/home.gif" alt="Gå til forsiden" />
</div>

/* css */
#AWToolBox{
margin: 11px 0;
text-align: center;
background-color: #6D94B1;
height: 20px; /* her må du lige tilpasse */
}
#AWToolbox img{
margin: 5px 0;
height: 10px; /* jeg er ikke lige klar over om dine enheder er i pixels eller ? */
width: 24px;
border: 0;
}
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