Центр блока вертикально и горизонтально с динамической шириной и высотой - PullRequest
Новая
       5

Центр блока вертикально и горизонтально с динамической шириной и высотой

0 голосов
/ 30 ноября 2011

Мне нужно центрировать элемент по вертикали и горизонтали, и элемент не может иметь фиксированных размеров. Содержимое элемента не должно быть затронуто ... это значит, что некоторые элементы будут выровнены по левому краю, другие центрированы, это могут быть изображения и т. Д. И т. Д.

Вот где я сейчас нахожусь: http://jsfiddle.net/Shpigford/BUbmz/

Ширина и высота синего блока динамически изменяется в зависимости от содержимого и центрируется по горизонтали, что прекрасно работает.

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

Синий блок не может иметь фиксированных размеров, хотя красный блок может .

Вот мой CSS: 

section {
  width: 500px;
  height: 300px;
  background: red;
}
.options {
  display:table;
  margin: 0 auto;
  background: blue;
}
h2 {
  text-align: center;
  margin: 0;
  padding: 0;
}
ul {
  margin: 0;
  padding: 0;
  text-align: center;
}
li {
  text-align: left;
}

И HTML: 

<section>
  <div class="options">
    <h2>My question</h2>
    <ul>
      <li>Ligula Quam</li>
      <li>Condimentum Nullam Mollis</li>
      <li>Aenean</li>
      <li>Commodo Dolor Nibh Ligula Vulputate</li>
    </ul>
  </div>
</section>

1 Ответ

3 голосов
/ 30 ноября 2011

Вот решение для центрирования DIV по вертикали, с запасными вариантами для различных браузеров, включая более старые версии IE.

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

[править]

В переводе ваша скрипка становится такой:

http://jsfiddle.net/GolezTrol/BUbmz/1/

...