Geek Answers Handbook

Vertical Alignment - Image-to-Image List

Neither gait nor browsing in SO helped me - I hope someone here can solve this problem:

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 image of "hook.png" is 32x35 px - but whenever I create list items, text under the name (ABC ...) will always be displayed below the image. I tried linear height and those are 100% pieces, but did not develop it.

Any quick help: /?

+7
source share
4 answers

Try several options.

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

Obviously, the position is unlikely to meet your needs, but messing with this method would be your best bet, I would say.

+8
source 
 <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>

I have never seen any of our designers try to use a list style in style when creating custom icons for a list, I think that's why :)

+1
source

If I understand your problem, does the text seem below the baseline?

Try setting the beelow property for your text:

padding-bottom

0
source

I came up with something similar that could save some HTML time:

 <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 the custom image list, you probably just need to adjust the top and size of ": before" and the addition of "li".

It works in all major browsers and in IE8 and more.

0
source

More articles:


All Articles