CODEWITHSUNDEEP
htmlcssimagelistvertical-alignment
Kris
Kris

Reputation: 575

Vertical Align - List with "list-style-image"

Neither googling nor browsing in SO helped me - hope someone here can solve this :

I have the following html :

<ul>
<li>ABC 1</li>
<li>ABC 2</li>
<li>ABC 3</li>
<li>ABC 4</li>
</ul>

and css

ul {list-style-image:url(../img/hook.png);}
li {vertical-align:middle;color:#FFFFFF;font-size:16px;text-shadow: 0em 0.13em 0.13em #2A2A2A;font-family:Helvetica,Arial,Sans-Serif;font-weight:normal;}

the "hook.png" image is 32x35 px - but whenever I create list items, text (e.g. ABC...) will always be shown below the image. Tried line-height and those 100% thingies - but neither worked out.

Any quick help :/ ?

Upvotes: 7

Views: 22157

Answers (4)

Ondřej Kohout
Ondřej Kohout

Reputation: 1

I came up with something like that, which may save u some time HTML:

<ul class="rozcestnik">
  <li><a href="#" title="1">1</a></li>
  <li><a href="#" title="2">2</a></li>
  <li><a href="#" title="3">3</a></li>
</ul>

CSS:

.rozcestnik {
    list-style-type: none;
    padding: 0;
    margin: 2.5em 2em 0;
}

.rozcestnik li:before {
    background: url("icon.png") no-repeat scroll 50% 50% transparent;
    content: " ";
    display: block;
    height: 20px;
    left: -20px;
    position: absolute;
    top: 0;
    width: 20px;
}
.rozcestnik li {
    position: relative;
    padding-bottom: 5px;
    padding-left: 5px;
}

According to custom list-image, you'll probably just need to customize the top and size ":before" and padding of "li".

It works across all major browsers and the application IE8 and more.

Upvotes: 0

Stumbler
Stumbler

Reputation: 2146

Try some variation of 

ul{
    background-image: url(../img/hook.png);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

Obviously the position is unlikely to fit your needs, but fiddling around with this method would be your best bet I'd say.

Upvotes: 8

IvanL
IvanL

Reputation: 2485

<html>
<head>
<style>
ul
{
    list-style-image:none;
}
li
{
    color:#FFFFFF;
    font-size:16px;
    text-shadow: 0em 0.13em 0.13em #2A2A2A;
    font-family:Helvetica,Arial,Sans-Serif;
    font-weight:normal;
    line-height:35px;

    margin-bottom:5px;
    padding-left: 36px;
    background-image: url('../img/hook.png');
    background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li>ABC 1</li>
<li>ABC 2</li>
<li>ABC 3</li>
<li>ABC 4</li>
</ul>
</body>
</html>

Never seen any of our designers try to use the list-style-image when implementing custom icons for list, I guess this is why :)

Upvotes: 1

user1746468
user1746468

Reputation: 85

If I have understood your problem is text seems bellow the baseline?

Try to set beelow property for your text:

padding-bottom

Upvotes: 0

Related Questions