Постраничная навигация (CSS)

Оформите навигацию, центрированную внутри DIV'а:

Требования:

Левая стрелка – слева, правая – справа, список страниц – по центру.
Список страниц центрирован вертикально.
Текст сверху и снизу ни на что не наползает.
Курсор при наведении на стрелку или элемент списка становится стрелкой pointer.

P.S. Без использования таблиц.

HTML-структура:

          <div class="nav">
  <img src="/?originalUrl=https%3A%2F%2Flearn.javascript.ru%2F%26quot%3Barrow-left.jpg%26quot%3B%2520class%3D%26quot%3Bleft%26quot%3B%2520width%3D%26quot%3B40%26quot%3B%2520height%3D%26quot%3B40%26quot%3B%26gt%3B%2520%2520%26lt%3Bimg%2520src%3D%26quot%3Barrow-right.jpg%26quot%3B%2520class%3D%26quot%3Bright%26quot%3B%2520width%3D%26quot%3B40%26quot%3B%2520height%3D%26quot%3B40%26quot%3B%26gt%3B%2520%2520%26lt%3Bul%2520class%3D%26quot%3Bpages%26quot%3B%26gt%3B%2520%2520%2520%2520%26lt%3Bli%26gt%3B...%26lt%3B%2Fli%26gt%3B%2520%2520%26lt%3B%2Ful%26gt%3B%26lt%3B%2Fdiv%26gt%3B%253C%2Fcode">

Стили:



      
        
        
          .nav {
  height: 40px;
  width: 80%;
  margin: auto;
}

.nav .left {
  float: left;
  cursor: pointer;
}

.nav .right {
  float: right;
  cursor: pointer;
}

.nav .pages {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
}

.nav .pages li {
  display: inline;
  margin: 0 3px;
  line-height: 40px;
  cursor: pointer;
}
        
      
      
      
Основные моменты:


Сначала идёт левая кнопка, затем правая, а лишь затем – текст.
Почему так, а не лево – центр – право?
Дело в том, что float смещает элемент вправо относительно обычного места. А какое обычное место будет у правого IMG без float?
Оно будет под списком, так как список – блочный элемент, а IMG – инлайн-элемент. При добавлении float:right элемент IMG сдвинется вправо, оставшись под списком.
Код в порядке лево-центр-право (неправильный):

      
        
        
          <div...>
  <img src="/?originalUrl=https%3A%2F%2Flearn.javascript.ru%2F%26quot%3Barrow-left.jpg%26quot%3B%2520class%3D%26quot%3Bleft%26quot%3B%2520width%3D%26quot%3B40%26quot%3B%2520height%3D%26quot%3B40%26quot%3B%26gt%3B%2520%2520%26lt%3Bul%2520class%3D%26quot%3Bpages%26quot%3B%26gt%3B%2520(li)%25201%25202%25203%25204%25205%25206%25207%25208%25209%26lt%3B%2Ful%26gt%3B%2520%2520%26lt%3Bimg%2520src%3D%26quot%3Barrow-right.jpg%26quot%3B%2520class%3D%26quot%3Bright%26quot%3B%2520width%3D%26quot%3B40%26quot%3B%2520height%3D%26quot%3B40%26quot%3B%26gt%3B%26lt%3B%2Fdiv%26gt%3B%253C%2Fcode">

        

      

      
      
Его демо:


    
    
  
Правильный порядок: лево-право-центр, тогда float останется на верхней строке.
Код, который даёт правильное отображение:

      
        
        
          <div ...>
  <img src="/?originalUrl=https%3A%2F%2Flearn.javascript.ru%2F%26quot%3Barrow-left.jpg%26quot%3B%2520class%3D%26quot%3Bleft%26quot%3B%2520width%3D%26quot%3B40%26quot%3B%2520height%3D%26quot%3B40%26quot%3B%26gt%3B%2520%2520%26lt%3Bimg%2520src%3D%26quot%3Barrow-right.jpg%26quot%3B%2520class%3D%26quot%3Bright%26quot%3B%2520width%3D%26quot%3B40%26quot%3B%2520height%3D%26quot%3B40%26quot%3B%26gt%3B%2520%2520%26lt%3Bul%2520class%3D%26quot%3Bpages%26quot%3B%26gt%3B%2520..%2520%25D1%2581%25D0%25BF%25D0%25B8%25D1%2581%25D0%25BE%25D0%25BA%2520..%2520%26lt%3B%2Ful%26gt%3B%26lt%3B%2Fdiv%26gt%3B%253C%2Fcode">

        

      

      
      
Также можно расположить стрелки при помощи position: absolute. Тогда, чтобы текст при уменьшении размеров окна не налез на стрелки – нужно добавить в контейнер левый и правый padding:

Выглядеть будет примерно так:

      
        
        
          <div style="position:relative; padding: 0 40px;">
  <img style="position:absolute;left:0" src="/?originalUrl=https%3A%2F%2Flearn.javascript.ru%2F%26quot%3B..left..%26quot%3B%2520width%3D%26quot%3B40%26quot%3B%2520height%3D%26quot%3B40%26quot%3B%26gt%3B%2520%2520%26lt%3Bul%26gt%3B%2520(li)%25201%25202%25203%25204%25205%25206%25207%25208%25209%2520%26lt%3B%2Ful%26gt%3B%2520%2520%26lt%3Bimg%2520style%3D%26quot%3Bposition%3Aabsolute%3Bright%3A0%26quot%3B%2520srr%3D%26quot%3B..right..%26quot%3B%2520width%3D%26quot%3B40%26quot%3B%2520height%3D%26quot%3B40%26quot%3B%26gt%3B%26lt%3B%2Fdiv%26gt%3B%253C%2Fcode">

        

      

      
      


Центрирование одной строки по вертикали осуществляется указанием line-height, равной высоте.
Это красиво лишь для одной строки: если окно становится слишком узким, и строка вдруг разбивается на две – получается некрасиво, хотя и читаемо.
Если хочется сделать красивее для двух строк, то можно использовать другой способ центрирования.


Открыть решение в песочнице.