Как я могу центрировать неупорядоченный список с динамическим контентом в div?

Question

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

Как я могу вертикально расположить мой неупорядоченный список, чтобы он всегда был вертикально выровнен внутри этого div?

Answer 1

Если вы пытаетесь отцентрировать по горизонтали, вот немного кода, который будет работать для любой длины:

Предварительный просмотр: http://jsfiddle.net/Wexcode/6UtFz/

HTML:

<div>
    <ul>
        <li><a href="#">Element 1</a></li>
        <li><a href="#">Element 2</a></li>
        <li><a href="#">Element 3</a></li>
        <li><a href="#">Element 4</a></li>
    </ul>
</div>

CSS:

div { overflow: hidden; }
ul { 
    position: relative;
    float: left;
    left: 50%;
    padding: 0;
    list-style: none; }
li { 
    position: relative;
    float: left;
    right: 50%;
    margin: 0 5px; }

---

Для вертикального центрирования, просто используйте vertical-align имущество.
Смотрите: http://jsfiddle.net/Wexcode/fK793/

Answer 2

Это довольно просто. Просто используйте display:table; для родительского div и display:table-cell; а также vertical-align:middle; для ребенка.

Скрипка: https://jsfiddle.net/fzfa312m/

div { 
    background: #f2f2f2;
    width: 300px; 
    height: 300px; 
    display:table; }

ul {
    vertical-align: middle; 
    display: table-cell; }

<div>
    <ul>
        <li><a href="#">Element 1</a></li>
        <li><a href="#">Element 2</a></li>
        <li><a href="#">Element 3</a></li>
        <li><a href="#">Element 4</a></li>
    </ul>
</div>