3

我有这样的代码设置：http: //jsfiddle.net/LtzhN/

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

我怎么能做到这一点，最好只是在 CSS 中？

我知道我可以在 jquery 中这样做：

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

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

但我宁愿不！

4

5 回答 5

1

您不需要按钮的特殊容器，只需要 CSS（上边距是按钮height+vertical padding的一半）。

jsFiddle 演示

.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-13T14:34:34.207 回答
1

我更新了你的小提琴：

JSFiddle 演示

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

您还可以避免浮动，这可能会产生意想不到的后果。

于 2013-09-13T14:52:29.367 回答
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;
}

和按钮应该是 display: 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/

于 2013-09-13T14:38:25.420 回答
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;
}
于 2013-09-13T14:42:39.190 回答
0

这种方法需要做一些工作，但您可以通过将文本包装jbe-content-container在与 我还必须通过移动一些边距和填充来进行调整。jbe-run-containerfloat: rightjbe-run'jbe-content-containerjbe-run containerdisplay: inline-blockvertical-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)
    );
}

工作的jsFiddle

于 2013-09-13T14:51:36.680 回答