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.
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/
精彩评论