我的代码设置如下: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而不是!
答案 0 :(得分:1)
您不需要按钮的特殊容器,只需要CSS(上边距是按钮的height
+ vertical padding
的一半)。
.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)
我更新了你的小提琴:
.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。
答案 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 container
与display: 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>