Centrerad bild i CSS

Tråden skapades och har fått 12 svar. Det senaste inlägget skrevs .
1

Hej!
Hur ska jag göra för att med CSS lägga en bild precis i mitten av en sida? Att bygga upp med tabeller går inte, då height="100%" inte är W3C-standard.

Tacksam för svar!

Kristofer

Så här typ?
<div id="bild">
<img src="bild.jpg" width="333" height="96" />
</div>

#logo {
margin-bottom: 55px;
text-align: center;
}

  • Medlem
  • Stockholm
  • 2004-06-21 08:15

Något i stil med följande borde fungera fint tycker jag. Tyvärr måste avstånden/storlekarna i id:n ändras beroende på bildens storlek, men så vitt jag vet finns inget riktigt bra alternativ om man inte gör så.

#splash {
position: absolute;
width: 200px;
height: 140px;
top: 50%;
left: 50%;
margin-top: -70px; /* halva bildhöjden */
margin-left: -100px; /* halva bildbredden */
}

<div id="splash">
<img src="/img/splash.gif" width="200" height="140" alt="splash" />
</div>

Det här gäller alltså centrering av bild i både höjd och bredd. Om du bara är intresserad av bilden hamna centerat i bredd blir det mycket enklare. Då räcker det med att använda "text-align: center;" på det omgivande blockelementet.

Senast redigerat 2004-06-21 11:12

Kan man inte centrera en bild utan CSS ?

Jag är total pryo på CSS och har ingen aning om hur man använder sig av stilmallar.

Nån som orkar ge tips från a - ö hur jag får till det?

- Slice -

Tackar tackar!

Slice: Varför vill du centrera en bild utan CSS?

/K

För att jag inte fattar hur man använder CSS.

Har aldrig satt mig in i det.

Behöver både hjälp och en spark i ändan.

- Slice -

  • Medlem
  • Karlstad
  • 2004-06-21 14:48

Hehe...om man ska ge ÄNNU mer info:
Använder du Dreamweaver så finns det en extension hos www.projectseven.com som heter "Layout Designer2".
Den tar nåt som Dreamweaver kallar "layer" (eller "skikt" på svenska), dvs ett "absolutely positioned division" och placerar det som du vill med hjälp av lite javascript.
Om man blir spyfärdig av CSS och inte bangar för att får lite js (och ett par Kb extra kod) i dokumentet, så är detta en väldigt smidig väg: Klick-klick-klart.

Fast JS till det är ju helt onödigt. För övrigt så är A List Aparten av de absolut vassaste resurserna på nätet för webbbyggare.

Det är inte busenkelt att centrera ett block i css men det går.

DIV.x {width: 50%; margin-left: auto; margin-right: auto;}

CSS är bara bäst.
Och ska hackas för hand.
[OT]Ogvile byrån är kungar. De hackar allt för hand. Tror inte på visuella editorer.[/OT]

says an old school web developer.

GoLives CSS editor är annars sjukt bra. Så jag avstår från att hacka för hand, då jag ändå har 100% koll på koden där.
Well well...

1
Bevaka tråden