CODEWITHSUNDEEP
htmlcss
user1943020
user1943020

Reputation:

How can I move text up when inside a span inside of a <li>

I have the following:

<li>
<a class="dw"><span>Design Goals</span></a>
</li>

.dw {
   background-image: url(/Content/images/icons/fugue/document-globe.png);
}

When viewed in my browser I see something like this

iii
iii  xxxxxxxxxxxxxxx
iii  xxxxxxxxxxxxxxx

Where i represent the image and x the text "Design goals".

Is there some way that I could push down the background image or push up the text so that I could get them to line up more. I tried adding padding and a margin to the span but that does not seem to work. I also tried different combination of line-height but that also does not work.

I tried: background-position: center but then it looks like this:

             iii
       xxxxxxiiixxxxxx
       xxxxxxxxxxxxxxx

Upvotes: 1

Views: 4844

Answers (3)

Maciej Małecki
Maciej Małecki

Reputation: 2745

Use background-position.

for example:

background-position: center 100px;

Upvotes: 2

Graeme
Graeme

Reputation: 4592

Apply the styling to the list element:

li {
    background-image: url(http://wpcdn.padgadget.com/wp-content/uploads/2010/08/alphabet.jpg);
}

<li><a href="#">Design Goals</a></li>

Upvotes: 0

Dineshkani
Dineshkani

Reputation: 3005

Use Div instead Span because span default display property is inline, div display property is block. If you want to push up the text then give the span tag as first.

Html

<li>
<span>Design Goals</span>
<div  class="dw" ><img src='http://wpcdn.padgadget.com/wp-content/uploads/2010/08/alphabet.jpg'><div>
</li>

css

.dw {
height: 100px;
width: 200px;
}

See Demo

In here I split the image so only it comes below to text Or use span display property as block to get down the text and image as first Reference

Upvotes: 0

Related Questions