I make navigation for the site, there was a problem with the numbers of the pages, how to align them in the center of these pictures?

alt text

in html looks like this

<div class="basecont"> <span><img alt="Назад" title="Назад" src="/sat/2/templates/my/image/right.png"/></span> <div class="navigation"> <span>1</span> <a href="http://127.0.0.1/sat/2/page/2/">2</a> </div> <a href="http://127.0.0.1/sat/2/page/2/"><img alt="Вперед" title="Вперед" src="/sat/2/templates/my/image/left.png"/></a> </div>

css

 .navigation { display: inline-block; margin-top:20px; } .navigation span { background: url("../image/hover_pag.png") no-repeat; color: #7bc4eb; text-align: center; padding:15px; padding-top: 16px; padding-bottom: 0px; } .navigation a { background: url("../image/pag.png") no-repeat scroll 0 0 transparent; color: #7bc4eb; text-decoration: none; padding:15px; padding-bottom: 0px; display: inline-block; }
  • Do you have more than 99 pages in principle?) Do not like the idea of ​​making a button from 3 parts (left-digit-right)? Then this problem will disappear by itself. - Sh4dow
  • To be honest, xs as solved in dle, the task was this) - tranceman

2 answers 2

http://jsfiddle.net/7soft/adhrD/

With display:inline-block; content is aligned to the baseline ( example ). I set the top alignment ( vertical-align:top; ). Well, better pictures, responsible for the interface, put through css =)

  • The problem still arose in ie6-7, the back and forth type blocks are not quite correctly displayed Screen - s019.radikal.ru/i614/1204/8a/21fc980fe70b.jpg - tranceman
  • Try to replace the div in the codes of these buttons with a span ... - egormkn
  • Did not help - tranceman
  • Updated, look at the link in the answer - egormkn
  • one
    And, no, it was not updated. Here is jsfiddle.net/7soft/adhrD/3 - egormkn

Probably padding-top: 16px; to remove.

  • No, how does this affect the text? With these paddings, I aligned the pictures. Otherwise, they would not nebylo. - tranceman pm
  • Please give a link to the page with the problem. - Oleg