Вертикально центр каждый элемент внутри DIV

Question

Вот пример демо моей проблемы

http://www.bootply.com/tkrs6G3GlG

Основном, я попал на левых групп форм, и в каждой у меня есть большой текст дает некоторую информацию и затем попросить пользователя выбрать что-то (в данном случае это только радио, но есть выпадающие списки и флажки). Я бы хотел, чтобы для каждой группы форм опции справа располагались вертикально (посередине) в зависимости от размера текста. В приведенном выше примере радио находятся сверху, но я хотел бы, чтобы они находились в середине соответствующей группы форм.

Я попытался

.vcenter{vertical-align:middle; 
    } 

, но это не работает. Я также попытался установить высоту div, которая содержит опции

.maxHeight{ 
     height:100%; 
} 

, но div не увеличивается. Я пробовал использовать большую высоту и скрывать переполнение, но не работал. Единственное, что работает до сих пор используют

.vcenter{ 
     position:absolute; 
     vertical-align: middle; 
} 

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

Answer 1

Если div находится внутри другого DIV, попробуйте

#my_div{ 
     margin-left: auto; 
     margin-right: auto; 
     width: /*put_your_width*/; 
} 

И если это parent div

#my_div{ 
     display: table; 
     margin-right: auto; 
     margin-left: auto; 
    } 

Answer 2

Есть несколько способов сделать это. Я обычно использую этот метод ...

HTML

<div> <p>Center this text</p> </div> 

CSS

div{  
    position: relative; 
    height: 500px; 
    width: 500px; 
    background: green; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
p{ 
    position: absolute; 
    top:50%; 
    text-align:center; 
    display:inline-block; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 

Answer 3

То, как я предпочитаю делать это добавить margin: auto; и сверху, слева, справа и внизу 0 как так :

.parent { 
    position: relative; 
} 

.child { 
    margin: auto; 
    position: absolute; 
     top: 0; right: 0; bottom: 0; left: 0; 
} 

Answer 4

вы можете использовать множество аплодисментов.

первый из них с позицией

.parent_div{ 
      position:relative; 
      width:500px; 
      height:500px; 
    } 
    .children_div{ 
      position:absolute; 
      width:100px; 
      height:100px; 
      left:0px; 
      right:0px; 
      top:0px; 
      bottom:0px; 
      margin:auto; 
    } 

-Но вы должны быть указаны в высоту и ширину дочернего элемента .. так что это не хорошо для дизайна жидкости.

Сек. Подход лучше я думаю, он использует дисплей :)

.parent_div{ 
      display:table; 
      width:500px; 
      height:500px; 
      text-align:center; 
    } 
    .children_div{ 
      display:table-cell; 
      width:100%; 
      height:100%; 
      vertical-align:middle; 

    } 

    .children_children_div{ 
      /*What ever... this div will be centered verticaly*/ 

    }