如何垂直对齐这个div?

时间:2013-09-13 14:25:25

标签: css

我的代码设置如下:http://jsfiddle.net/LtzhN/

我想垂直对齐容器中间的蓝色按钮,但是容器没有固定的高度。

我该怎么做,最好只用CSS?

我知道我会在jquery中做这样的事情:

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

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

但是id而不是!

5 个答案:

答案 0 :(得分:1)

您不需要按钮的特殊容器,只需要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;
}

答案 1 :(得分:1)

我更新了你的小提琴:

JSFiddle Demo

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

你也可以避免浮动,这可能会产生意想不到的后果。

答案 2 :(得分:0)

还有一些工作要做。

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-whatever和jbe-run-container:table-cell等等:

.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;
}

和按钮应该显示:inline-block并删除一些额外的属性:

.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-result显示属性设置为table而不是table-row。

清理了一下:http://jsfiddle.net/LtzhN/8/

答案 3 :(得分:0)

.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;
}

答案 4 :(得分:0)

这种方法需要一些工作,但您可以通过使用与jbe-content-container处于同一级别的名为jbe-run-container的div容器中包装文本来解决此问题,从而删除{{1}在float: right类上,重新排序标记以将jbe-run放在'jbe-content-container之前,然后将jbe-run containerdisplay: inline-block一起使用。我还必须通过移动一些边距和填充来调整。

<强> HTML

vertical-align: middle

<强> CSS

<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>

Working jsFiddle