Как центрировать элементы списка в столбце - PullRequest
Новая
       45

Как центрировать элементы списка в столбце

2 голосов
/ 16 мая 2010

Я пытаюсь расположить номера страниц в нижней части этого тестового блога ...

http://jocelynwarner.com/test/

в центре между предыдущей и следующей кнопками, однако я не могу понять, как это сделать, я пробовал несколько разных уроков, но они, похоже, не помогли с этим.

Будем весьма благодарны за любые советы о том, как расположить их по центру в левом столбце (ширина содержимого блога - боковая панель).

Ответы [ 3 ]

1 голос
/ 16 мая 2010

Пабло это правильно. Это хороший случай, когда использование display:inline-block помогает упростить процесс. Кстати, вот хороший пост о преимуществах и недостатках его использования, когда вы хотите горизонтальный список: Отображение CSS: встроенный блок: почему он качается и почему он отстой

Кроме того, это не связано, но, согласно вашему описанию, вы хотите, чтобы div нумерации страниц был того же размера, что и столбец содержимого, верно? в этом случае вы должны присвоить классу нумерации страниц width из 548px, так же, как класс ваших сообщений, нет?

1 голос
/ 16 мая 2010

Чтобы расширить ответ Пабло для правильной поддержки inline-block во всех браузерах: 

.pagination .third {
    /* Supports Firefox < 3.0, note
       that it is not 1:1 identical
       to inline-block but it is
       usually a good substitute */
    display: -moz-inline-box;

    /* Standards support */
    display: inline-block;

    /* IE 6 & 7 do not support
       inline-block for block-
       level elements; fortunately
       inline + hasLayout is exactly
       the same as inline-block in
       these browsers */
    *display: inline;
    *zoom: 1;
}
0 голосов
/ 16 мая 2010

заморачиваюсь и копирую нумерацию страниц Div 

<div class="pagination">
 <div class="third"></div>
 <div class="third">
  <ul class="page-numbers page-bright current-page-cyan behind-dark fill-gradient shape-  round">
   <li><span class="page-numbers current">1</span></li>
   <li><a href="http://jocelynwarner.com/test/page/2/" class="page-numbers">2</a></li>
   <li><a href="http://jocelynwarner.com/test/page/3/" class="page-numbers">3</a></li>
   <li><a href="http://jocelynwarner.com/test/page/4/" class="page-numbers">4</a></li>
  </ul>
 </div>
 <div class="third">
  <a href="http://jocelynwarner.com/test/page/2/">
   <p class="next">Next »</p>
  </a>
 </div>
</div>

Вот новый стиль, который сделает его центрированным 

    .pagination {
      border-top:1px dotted;
      float:left;
      font-size:12px;
      margin-top:10px;
      padding-top:10px;
      text-align:center;
      width:708px;
    }
    .pagination .third {
      display:inline-block;
    }
    ul.page-numbers {
      /*Clear all styles for this*/
    }

Я рекомендую прочитать справочник и руководства по CSS на w3Schools

...