CODEWITHSUNDEEP
cssimagelistposition
Marie
Marie

Reputation: 175

How can I move the position of an image that's inline with some text?

I have the following:

<li><a class='disabled' ><img src='../../Content/Icons/home.png' />Home</a></li>

My li height is 25px and my img is 16x16. What I would like to do is to make the image line up with the text and also have a small space between the image and text. I tried the following:

img { padding-top: 6px; margin-right: 4px; }

The image moves down but the text moves down as well.

Is there a way I could just add padding or margin to the image without the text moving?

Please note that I already use set (and change) the background color so I need to use the img tag.

Upvotes: 15

Views: 31848

Answers (3)

Nami Nam
Nami Nam

Reputation: 91

You can also give the

  • or the 

    a{
  float:left;
}

    (wiil not take into account the pesky 6px from the image - thirtydot mentioned)

    Upvotes: -1

    • thirtydot
    thirtydot

    Reputation: 228182

    You can use:

    img {
    margin-right: 4px;
    position: relative;
    top: 6px
}

    That will move only the img down 6px from where it would have been.

    Upvotes: 28

    Subdigger
    Subdigger

    Reputation: 2193

    something like this? html:

    <li class="menu"><a class='disabled' >Home</a></li>

    css:

    li.menu { 
  background-image: url(../../Content/Icons/home.png) left 6px;
  padding-left: 20px;
  margin-right: 4px;
 }

    Upvotes: 0

    Related Questions