Как центрировать вертикальный текст внутри div?

#html #css

#HTML #css

Вопрос:

Я пытаюсь создать простую гистограмму, используя неупорядоченный список. У меня есть текст внутри каждого из столбцов, и он повернут так, чтобы он был вертикальным. График является адаптивным, поэтому ширина полос уменьшается при уменьшении размера экрана.

 <div id="chart">
  <ul id="bars">
    <li><div data-percentage="85" class="bar"><span>HTML</span></div></li>
    <li><div data-percentage="85" class="bar"><span>CSS</span></div></li>
    <li><div data-percentage="60" class="bar"><span>jQuery</span></div></li>
    <li><div data-percentage="60" class="bar"><span>PHP</span></div></li>
    <li><div data-percentage="35" class="bar"><span>MySQL</span></div></li>
    <li><div data-percentage="85" class="bar"><span>Worpress</span></div></li>
  </ul>
</div>

Связанные CSS и jQuery можно найти в jsFiddle: http://jsfiddle.net/8QVa6 /

Когда ширина полос уменьшается, текст обрезается вправо, есть идеи, какой CSS мне не хватает, чтобы все время держать его по центру?

Ответ №1:

Я бы использовал top: 50% with position: relative для элементов label span . Это должно быть display: block для того, чтобы это работало.

 #chart #bars li .bar span {
    color: #fff;
    display: block;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

    position: relative;
    top: 50%;

    margin-top: -10px; /* about half line height */
}

Это margin: -10px необходимо для компенсации высоты строки после поворота. Вы можете оставить это, если это не так уж плохо, если метка не точно центрирована.

Смотрите форк: http://jsfiddle.net/Nb53Z/2 /

1. Это сработало с горизонтальным перемещением, но вместо вертикального центрирования есть ли возможность выровнять по вертикали сверху и оставить отступ размером 10-15 пикселей?

2. На самом деле, забудьте об этом. Мне нравится, как вы это придумали! Спасибо!

3. Я просто хотел попросить у вас изображение, показывающее ожидаемый результат, потому что ваш заголовок Q и ваш предыдущий комментарий кажутся немного противоречивыми. : o Правильное ли мое решение или есть детали, которые я пропустил?

4. Нет, ваше решение идеально.

Ответ №2:

Вы используете display:inline-table на промежутке, вам нужно добавить display: table; к родительскому

 #chart #bars li .bar {
  display: table;
  width: 90%;
  margin-left: 10%;
  margin-bottom:10px;
  position: absolute;
  bottom: 0;
}