开发者

How to align middle slash image with links?

I have this css code http://jsfiddle.net/989Pd/ where the slash images must be in the middle of text height. How can I do it?

<div class="menu">
<div class="pedio940">开发者_如何学运维
<ul>
<li><a href="#">Αρχική</a></li>
<li><a href="#">Προσθήκη RSS</a></li>
<li><a href="#">Επικοινωνία</a></li>
</ul>
</div>
</div>


Instead of creating the slash as a background image, create it as an inline element and use the CSS: vertical-align:middle.

.menu ul li:after {
   content:url("http://i.imgur.com/uB4Gz.png");
   display:inline;
   vertical-align:middle
}

Demo: http://jsfiddle.net/989Pd/8/

Edit: Yours is on the left, mine is on the right. I've drawn red lines to show the difference. They are not the same.

How to align middle slash image with links?


You can just adjust the height of the li

http://jsfiddle.net/989Pd/3/


put in a top value for the background like this: http://jsfiddle.net/989Pd/9/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜