Css Вертикальное выравнивание - PullRequest
Новая
       13

Css Вертикальное выравнивание

0 голосов
/ 12 июля 2011

У меня есть кнопки с порядком одного столбца внутри div. Количество кнопок меняется. Я хочу выровнять кнопки по вертикали. "вертикальное выравнивание: середина" не работает. Как я могу это сделать?

Высота Div фиксирована. http://jsfiddle.net/WmD3L/ Как я могу выровнять эти кнопки по вертикали?

Ответы [ 2 ]

3 голосов
/ 12 июля 2011

Если кнопка имеет фиксированную высоту, вы можете использовать высоту строки, чтобы поместить текст в середину.

например, 

#button {
   height: 50px;
   line-height: 50px; //Must be the same as height to vertically align to the middle
}

Вы также можете использовать 

#button {
    display: table-cell;
    vertical-align: middle;
}

Но я не думаю, что это работает в разных браузерах, к сожалению.

0 голосов
/ 09 марта 2013

Это лучший способ на мой взгляд (это IE8 +):

HTML: 

<div class="block">
  <div class="centered">
    <div><input type="submit" value="ABC"/></div>
    <div><input type="submit" value="ABC"/></div>
    <div><input type="submit" value="ABC"/></div>
  </div>
</div>

CSS: 

/* Can be any width and height */
.block {
  height:500px;
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content:'';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can be any width or height */
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

Демо: http://jsfiddle.net/WmD3L/13/

...