CODEWITHSUNDEEP
htmlcss
user1038814
user1038814

Reputation: 9667

List text won't align with image

I have these images that reside in every list element in my unordered list:

<ul class="bot">
    <li>
       <img src="images/crime.png" class="pil-img">
       <a href="#">Fire</a>
    </li>
</ul>

I wish to align the text in the list item as shown in the image Now, I've given the following style to the <img /> element in my list item: 

.pil-img {
    padding-right: 10px;
    margin: 4px 0px 0px 15px;
}

and to the <a /> tag

.bot li a { margin-top: -5px; }

enter image description here

but this doesn't seem to work. Any ideas?
Cheers

Upvotes: 0

Views: 166

Answers (2)

lurker
lurker

Reputation: 58254

See if this works for you in your overall context.

HTML

<ul class="bot">
    <li>
       <div class="div_class"><img src="images/crime.png" class="pil-img"></div>
       <div class="div_class"><a href="#">Fire</a></div>
    </li>
</ul>

CSS

.div_class {
    vertical-align: middle;
    display: inline-block;
}

You can tweak the pil-img class as desired.

Here's a fiddle.

Upvotes: 0

ProfileTwist
ProfileTwist

Reputation: 1554

Html:

<ul>
  <li><a href="#">Some text</a></li>
  <li><a href="#">Some text</a></li>
</ul>

CSS:

ul li {
  background: url(image.png) no-repeat 100% 0;
  line-height: HEIGHT OF IMAGE (i.e. 100px);
  padding: 0 30px 0 0;
}

There's a start. I would need to know the dimensions of your image to help you more.

If you need to have 2 images (star + cross/check) then you should add 1 bg to the <li> and another to <a>. That should start you off on the right track.

Upvotes: 1

Related Questions