标签云

微信群

扫码加入我们

WeChat QR Code

I'm working on developing a simple nav element within a website, and am trying to use a sprite page to add images to the "Last" and "Next" text buttons. I can get them all to display properly, but the text will not center vertically on those elements. Anyone have any suggestions?<div class="post_nav"><div class="last">Last</div><div class="home">&nbsp;</div><div class="next">Next</div></div>.post_nav { position: relative; width: 30%; margin: 10px auto; text-align: center; font-family: 'Bitter', Georgia, serif; font-weight: 700; color: #c9c9c9; }.post_nav div { display: inline-block; text-transform: uppercase; padding: 0 20px; }.post_nav .last:before { content: ""; width: 30px; height: 30px; line-height: 20px ; background: url('http://i.imgur.com/BlY1jqF.png') no-repeat -60px 0; float: left; margin: auto 5px; overflow: hidden; }.post_nav .home:before { content: ""; width: 30px; height: 30px; line-height: 30px ; background: url('http://i.imgur.com/BlY1jqF.png') no-repeat -120px 0; float: left; margin: auto 5px; padding: 0; overflow: hidden; }.post_nav .next:after { content: ""; width: 30px; height: 30px; line-height: 30px ; background: url('http://i.imgur.com/BlY1jqF.png') no-repeat -90px 0; float: right; margin: auto 5px; overflow: hidden; }Here's the Fiddle for this issue.


Why is it always the dumbest things that I leave out? :(Thank you so much.

2019年04月18日32分44秒