Как вертикально выровнять этот div?

У меня есть код настроить так: http://jsfiddle.net/LtzhN/Как вертикально выровнять этот div?

Я хотел бы, чтобы выровнять по вертикали на синюю кнопку в середине контейнера, однако контейнер не имеет фиксированную высоту.

как я могу это сделать, желательно только в CSS?

я знаю, я oculd сделать это в Jquery что-то вроде:

var halfOuterHeight = $('.jbe-result').height()/2, 
    halfButtonHeight = $('.jbe-run').height()/2; 

$('.jbe-run').css('margin-top', halfOuterHeight - halfButtonHeight)

но идентификатор, а не!

источник

2013-09-13 rpsep2

Вам не нужен специальный контейнер для кнопки, только CSS (верхнее поле составляет половину height + vertical padding кнопки).

jsFiddle Demo

.jbe-run { 
    margin-top: -11px; 
    padding:4px 10px; 
    width:70px; 
    color:#ffffff; 
    font-size:12px; 
    border-radius:4px; 
    -webkit-border-radius:4px; 
    text-align: center; 
    position: absolute; 
    top: 50%; 
    right: 10px; 
}

источник

2013-09-13 14:34:34 Itay

Ну есть немного работы, чтобы сделать.

Html, я добавил окружающий контейнер для текста и заголовка.

<div class="jbe-result"> 
    <div class="jbe-whatever"> 
    <h3>text goes here which could be quite long winded which will push the height of the div higher</h3> 
    <p>Date saved: 13-09-2013, 12:14 am</p> 
     </div> 
    <div class="jbe-run-container"> 
     <div class="jbe-run">Run</div> 
    </div> 


</div>

CSS, как JBE-то, и JBE перспективы-контейнер для отображения: таблица-клетки и еще некоторые:

.jbe-whatever { 
display: table-cell; 
} 

.jbe-run-container{ 

    width:32%; 
    margin-left:2%; 
    padding-left:2%; 
    border-left:1px solid #c9cfdd; 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
}

и кнопка должен быть дисплей: встроенный блок и удалить некоторые дополнительные свойства :

.jbe-run{ 
    padding:4px 10px; 
    width:70px; 
    color:#ffffff; 
    font-size:12px; 
    border-radius:4px; 
    -webkit-border-radius:4px; 
    display: inline-block; 

}

ОБНОВЛЕНИЕ: http://jsfiddle.net/LtzhN/5/ Необходимый для установки JBE-отображение результата свойства таблицы вместо таблицы строк.

Подчищены немного: http://jsfiddle.net/LtzhN/8/

источник

2013-09-13 14:38:25

.jbe-run{ 
    margin-top: -10px; 
    padding:4px 10px; 
    width:70px; 
    color:#ffffff; 
    font-size:12px; 
    border-radius:4px; 
    -webkit-border-radius:4px; 
    text-align: center; 
    top: 50%; 
    float: right; 
    position: relative; 
}

источник

2013-09-13 14:42:39

Этот подход занимает немного работы, но вы можете это исправить с помощью оберточной текст в сНу контейнер под названием jbe-content-container на том же уровне, что и jbe-run-container, сняв float: right по классу jbe-run, переупорядочив разметку до 'jbe-content-container до jbe-run container, а затем используя display: inline-block с vertical-align: middle. Мне также пришлось корректировать, перемещая некоторые поля и заполняя их.

HTML

<div class="jbe-result"> 
    <div class="jbe-content-container">   
     <h3>small amount of text</h3> 
     <p>Date saved: 13-09-2013, 12:14 am</p> 
    </div> 
    <div class="jbe-run-container"> 
     <div class="jbe-run">Run</div> 
    </div> 
</div> 

<div class="jbe-result"> 
    <div class="jbe-content-container"> 
     <h3>text goes here which could be quite long winded which will push the height of the div higher</h3> 
     <p>Date saved: 13-09-2013, 12:14 am</p> 
    </div> 
    <div class="jbe-run-container"> 
     <div class="jbe-run">Run</div> 
    </div> 
</div>

CSS

.jbe-result{ 
    float: left; 
    width: 96%; 
    padding: 5px 2%; 
    border-radius: 5px; 
    border: 1px solid #c9cfdd; 
    background-color: #ffffff; 
    margin-bottom: 6px; 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    -webkit-transition-duration: .25s; 
    transition-duration: .25s; 
    opacity:1; 
    height:auto; 
    position: relative; 
    display: table-row; 
} 

.jbe-content-container { 
    width: 64%; 
    border-right:1px solid #c9cfdd; 
    padding-right:2%; 
    margin-right:1%; 
} 

.jbe-content-container, 
.jbe-run-container { 
    display: inline-block; 
    vertical-align: middle; 
    zoom: 1; 
} 

.jbe-result h3{ 
    font-size: 14px; 
    color: #003777; 
    margin: 0 0 2px 0; 
} 

.jbe-result p{ 
    color: #888888; 
    font-size: 12px; 
    margin: 0; 
} 

.jbe-run{ 
    margin:0; 
    float:right; 
    padding:4px 10px; 
    width:70px; 
    color:#ffffff; 
    font-size:12px; 
    border-radius:4px; 
    -webkit-border-radius:4px; 
    text-align: center; 
} 

.jbe-run-container{ 
    width:32%; 
} 

.jbe-run, .jbe-edit, .add-div{ 
    background-image: linear-gradient(bottom, #003777 52%, #005DA4 85%); 
    background-image: -o-linear-gradient(bottom, #003777 52%, #005DA4 85%); 
    background-image: -moz-linear-gradient(bottom, #003777 52%, #005DA4 85%); 
    background-image: -webkit-linear-gradient(bottom, #003777 52%, #005DA4 85%); 
    background-image: -ms-linear-gradient(bottom, #003777 52%, #005DA4 85%); 
    background-image: -webkit-gradient(
     linear, 
     left bottom, 
     left top, 
     color-stop(0.52, #003777), 
     color-stop(0.85, #005DA4) 
    ); 
}

Working jsFiddle

источник

2013-09-13 14:51:36 bbone

Я обновил свой скрипку:

JSFiddle Demo

.jbe-result{ 
    ... 
    display:table; 
} 
.jbe-run-container{ 
    display:table-cell; 
    vertical-align:middle; 
    border-left:1px solid silver; 
    width: 30%; 
}

Вы также можете избежать поплавка, который может иметь непреднамеренные последствия.

источник

2013-09-13 14:52:29 davids

Как вертикально выровнять этот div?

ответ

Смежные вопросы