Css 如何垂直对齐此div?
我的代码设置如下: 我想垂直对齐容器中间的蓝色按钮,但是容器没有固定的高度。 我如何才能做到这一点,最好只是在CSS 我知道我可以在jquery中这样做:Css 如何垂直对齐此div?,css,Css,我的代码设置如下: 我想垂直对齐容器中间的蓝色按钮,但是容器没有固定的高度。 我如何才能做到这一点,最好只是在CSS 我知道我可以在jquery中这样做: var halfOuterHeight = $('.jbe-result').height()/2, halfButtonHeight = $('.jbe-run').height()/2; $('.jbe-run').css('margin-top', halfOuterHeight - halfButtonHeight) 但我
var halfOuterHeight = $('.jbe-result').height()/2,
halfButtonHeight = $('.jbe-run').height()/2;
$('.jbe-run').css('margin-top', halfOuterHeight - halfButtonHeight)
但我宁愿不要 按钮不需要特殊容器,只需要CSS(上边距是按钮高度的一半)
嗯,还有一点工作要做 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>
按钮应该是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;
}
更新:
需要将jbe结果显示属性设置为table而不是table row
清理一点:这种方法需要一点工作,但是您可以通过将文本包装到一个名为
jbe content container
的div容器中,与jbe run container
处于同一级别,删除jbe run
类上的float:right
来解决这个问题,重新排列标记,将'jbe-content-container
放在jbe-run容器之前,然后使用display:inline block
和垂直对齐:中间对齐。我还必须通过移动一些边距和填充来进行调整
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>
我更新了你的小提琴:
您还可以避免可能产生意外后果的浮动
.jbe-run{
padding:4px 10px;
width:70px;
color:#ffffff;
font-size:12px;
border-radius:4px;
-webkit-border-radius:4px;
display: inline-block;
}
.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;
}
<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>
.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)
);
}
.jbe-result{
...
display:table;
}
.jbe-run-container{
display:table-cell;
vertical-align:middle;
border-left:1px solid silver;
width: 30%;
}