---
title: "Problem med vertical-align"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/169714-problem-med-vertical-align"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "saw"
published: "2008-03-08T12:10:55.000Z"
updated: "2008-03-08T13:52:35.000Z"
replies: 6
views: 614
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/169714-problem-med-vertical-align"
---

# Problem med vertical-align

## #1 — saw, 2008-03-08T12:10Z

Så här ser det ut:
Jag har först en liten bild(med en pil på) därefter kommer en länk (detta 
upprepar sig sju ggr).
Problemet är att jag inte kan få länken i gämnhöjd med pilen.

```
<div style=" margin-top:0; text-align:left; font-size:12px; font-weight:bold;
 vertical-align: top;" ><img src="bilder/pilen.gif" alt="" /><a href="index.aspx?
index=1">Hemservice</a></div>
```

Se bifogad bild.
Tacksam för hjälp.

Bilagor:

- [pilar.GIF](https://www.webforum.nu/a/17366.gif)

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

## #2 — MickeA.com, 2008-03-08T12:18Z

Det är alltid lite meck med att få till det där.
I ditt fall har jag använt en ul / li lista för menyn:

```
<ul>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
</ul>
```

Och sen använt *list-style-item* eller *list-style-image* för att få med pilen.
Mer info finns här: <http://www.devguru.com/Technologies/css/quickref/css_liststyleimage.html>

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

## #3 — saw, 2008-03-08T12:58Z

Tack för svar det är ju en bit på vägen men jag kan inte ladda bilden ifrån css

```
ul.out { list-style-position: outside; 
	list-style-image: url("bilder/pilen.gif"); }
```

Det brukar alltid tetas för mig det...

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

## #4 — Danne V, 2008-03-08T13:16Z

Du ska nog inte ha URL:en inom citationstecken tror jag. Men du kan lika gärna prova sätta in bilden i a-taggen, t.ex.:

```
a {
padding-left:15px;
background: url (bilder/pilen.gif) left middle;}
a:hover {
background: url(bilder/pilen2.gif) left middle;}
```

 
typ....

"left" är bildens horisontella placering, "middle" är dess vertikala placering (du kan testa top och bottom också).

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

## #5 — saw, 2008-03-08T13:37Z

Nej jag får ingen bild med mig, annars så ser det ju snyggt ut.

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

## #6 — Troxy, 2008-03-08T13:45Z

Det är vanligt att man missförstår egenskapen "vertical-align".
Någon annan sitter säkert på en bra förklaring för hur det fungerar, men här är en snabblänk jag hittade:
<http://phrogz.net/CSS/vertical-align/index.html>

Du kan använda din ursprungliga kod men behöver bara ändra en detalj:

```
<div style=" margin-top:0; text-align:left; font-size:12px; font-weight:bold;" ><img src="bilder/pilen.gif" alt="" style="vertical-align: middle;" /><a href="index.aspx?
index=1">Hemservice</a></div>
```

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

## #7 — saw, 2008-03-08T13:52Z

Detta tackar jag för, det blev kanonbra.

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/169714-problem-med-vertical-align