---
title: "En vertikalt centrerad bild i en div"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/88843-en-vertikalt-centrerad-bild-i-en-div"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Tjock-Erik"
published: "2003-10-18T13:44:06.000Z"
updated: "2006-04-19T11:24:03.000Z"
replies: 10
views: 1117
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/88843-en-vertikalt-centrerad-bild-i-en-div"
---

# En vertikalt centrerad bild i en div

## #1 — Tjock-Erik, 2003-10-18T13:44Z

Hur gör man för att centrera innehållet i en div vertikalt. Jag hittar inget med CSS som fungerar.

Permalänk: https://www.webforum.nu/p/88843

## #2 — cyprys, 2003-10-18T13:54Z

Funkar \<div valign=middle\> ?

Permalänk: https://www.webforum.nu/p/1189305

## #3 — Tjock-Erik, 2003-10-18T14:20Z

nej

Permalänk: https://www.webforum.nu/p/1189322

## #4 — cyprys, 2003-10-18T14:27Z

Du kan inte köra i en table då?

\<td valign=middle\> funkar i alla fall.

Permalänk: https://www.webforum.nu/p/1189325

## #5 — Patrik81, 2003-10-18T15:07Z

Ta och titta en bit ned på den här sidan, så har de lite exempel på olika vertikala placeringar:

<http://www.devguru.com/Technologies/css/quickref/css_verticalalign.html>

Hoppas det kan vara till hjälp.

MVH Patrik

Permalänk: https://www.webforum.nu/p/1189332

## #6 — bossse, 2003-10-18T16:02Z

Med css var det, här mitt förslag.

```
<html>
<head>
<title></title>
<style type="text/css">
<!--
div {widh:100%; height:100%; background-color:green; border:4px solid black;}
.bild { position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-120px;}
-->
</style>
</head> 
<body>
<div>
<img src="bild1.jpg" width="300" height="240" class="bild">
</div>
</body>
</html>
```

Ändra width och height till bildens dimensioner. Du ändrar alltså värden för margin-left/margin-top enl. nedan. 
\<BR\>
Om din bild är 300px bred och 200px hög så blir margin-värdena -150px respektive -100px. 
\<BR\>
Dvs hälften av bildens mått. Bilden ligger då alltid i mitten oavsett upplösning.
\<BR\>
Om du bara vill centrering åt ett håll så tror jag du kan räkna ut detta själv!
\<BR\>
Du kan även ta bort div-deklarationen i css-delen.

Permalänk: https://www.webforum.nu/p/1189363

## #7 — oskars, 2006-04-18T07:06Z

Hej, ursäkta att jag återupplivar en gammal tråd.

Men jag tycker att bossses förslag är bra, men jag behöver ett som fungerar även om man inte alltid vet storleken på bilden i förväg. Har sökt, men bara hittat kodförslag där man redan vet storleken på bilden.

Permalänk: https://www.webforum.nu/p/1801353

## #8 — Insider, 2006-04-18T08:22Z

Sökte lite och fann: <http://www.brunildo.org/test/img_center.html>

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv">
 <head>
  <title>Test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 500px;
    height: 500px;
    border:1px solid #000;
}
.wraptocenter * {
    vertical-align: middle;
}
/*\*//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
</style>
<!--[if IE]><style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->
  </head>
  <body>
<div class="wraptocenter"><span></span><img src="bild.gif" alt="..."></div>
  </body>
</html>
```

Permalänk: https://www.webforum.nu/p/1801365

## #9 — oskars, 2006-04-18T12:16Z

Se där ja! Tack tack så mycket!

Permalänk: https://www.webforum.nu/p/1801451

## #10 — oskob, 2006-04-19T10:29Z

Stödet för inline-block är väl inte fullständigt va?

Permalänk: https://www.webforum.nu/p/1801816

## #11 — Insider, 2006-04-19T11:24Z

Nej, det stöds bara fullt ut i Opera 7 tror jag. Det finns ett partiellt stöd i MSIE och det stödet nyttjas i koden tillsammans med det tomma \<span\> elementet.

Permalänk: https://www.webforum.nu/p/1801835

---

Tråden på webben: https://www.webforum.nu/amne/html-css/88843-en-vertikalt-centrerad-bild-i-en-div
