Почему текст не выравнивается в элементах списка?

Учитывая следующую простую страницу, в которой отображается неупорядоченный список:

<title>Day Picker</title> 
  
 
 


 <ul>
 <li>first row, first column</li>

 <li>second row, first column</li>
 <li>second row, second column</li>

 <li>third row, first column</li>
 <li>third row, second column</li>
 <li>third row, third column</li>
 <li>third row, fourth column</li>
 <li>third row, fifth column</li>
 <li>third row, sixth column</li>
 <li>third row, seventh column</li>
 </ul>

Текст внутри элементов

  • должен быть центрирован (по вертикали и по горизонтали).

    EDIT: фиксированная плохая разметка

  • 1 ответ

    Он выглядит по центру в следующем примере:

    Рабочий пример

    Хотя он может не работать в зависимости от вашего браузера и действительности вашей разметки, обычно HTML не нравится

    пределах
      .

      Предложенное решение:

      Используя индикатор, с которым вы хотите указать строку, например " 1 ", " 2 " и " 3 ", и пусть Javascript/jQuery обрабатывает вашу ситуацию с шириной.

      HTML:

      <ul>
       <li>first row, first column</li>
       <li>second row, first column</li>
       <li>second row, second column</li>
       <li>third row, first column</li>
       <li>third row, second column</li>
       <li>third row, third column</li>
       <li>third row, fourth column</li>
       <li>third row, fifth column</li>
       <li>third row, sixth column</li>
       <li>third row, seventh column</li>
      </ul>

      JQuery:

      //This will group each of your classes and apply the %-based width.
      $('.1,.2,.3').each(function(){
       var width = Math.floor(100/($('.' + $(this).attr('class')).length));
       $(this).css('width',width + '%');
      });

      Пример предполагаемого решения

      jQuery (с попыткой вертикального центрирования):

      $('.1,.2,.3').each(function(){
       var width = Math.floor(100/($('.' + $(this).attr('class')).length));
       var height = $(this).height() / 2;
       $(this).css('width',width + '%')
       .css('margin-top',height + 'px')
       .css('height',($(this).height() - height) + 'px');
      });

      Попробуйте пример с вертикальной ориентацией

    licensed under cc by-sa 3.0 with attribution.