[英]how to vertically align this div?
I have code set up like this: http://jsfiddle.net/LtzhN/ 我的代码设置如下: http : //jsfiddle.net/LtzhN/
I'd like to vertically align the blue button in the middle of the container, however the container doesn't have a fixed height. 我想垂直对齐容器中间的蓝色按钮,但是容器没有固定的高度。
how can I do this, preferably just in CSS? 我该怎么做,最好只用CSS?
i know i oculd do it in jquery something like: 我知道我会在jquery中做这样的事情:
var halfOuterHeight = $('.jbe-result').height()/2,
halfButtonHeight = $('.jbe-run').height()/2;
$('.jbe-run').css('margin-top', halfOuterHeight - halfButtonHeight)
but id rather not! 但我不是!
You don't need the special container for the button, only the CSS (the top margin is half the height
+ vertical padding
of the button). 您不需要按钮的特殊容器,只需要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;
}
I updated your fiddle: 我更新了你的小提琴:
.jbe-result{
...
display:table;
}
.jbe-run-container{
display:table-cell;
vertical-align:middle;
border-left:1px solid silver;
width: 30%;
}
You can also avoid float which can have unintended consequences. 你也可以避免浮动,这可能会产生意想不到的后果。
Well there is a bit of work to be done. 那么还有一些工作要做。
Html, I added surrounding container for text and heading. 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, both jbe-whatever and jbe-run-container to display: table-cell and some more: 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;
}
and button should be display: inline-block and remove some extra properties: 和按钮应显示:inline-block并删除一些额外的属性:
.jbe-run{
padding:4px 10px;
width:70px;
color:#ffffff;
font-size:12px;
border-radius:4px;
-webkit-border-radius:4px;
display: inline-block;
}
UPDATE: http://jsfiddle.net/LtzhN/5/ Needed to set jbe-result display property to table instead table-row. 更新: http : //jsfiddle.net/LtzhN/5/需要将jbe-result显示属性设置为table而不是table-row。
Cleaned up a bit: http://jsfiddle.net/LtzhN/8/ 清理了一下: http : //jsfiddle.net/LtzhN/8/
.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;
}
This approach takes a little bit of work, but you can fix this by using wrapping your text in a div container called jbe-content-container
at the same level as the jbe-run-container
, removing the float: right
on the jbe-run
class, reordering the markup to put 'jbe-content-container
before the jbe-run container
and then using display: inline-block
with vertical-align: middle
. 这种方法需要一些工作,但是您可以通过将文本包装在与jbe-run-container
相同级别的名为jbe-content-container
的div容器jbe-content-container
,并在jbe-run-container
删除float: right
解决此jbe-run
类,重新排序标记以将'jbe-content-container
放在jbe-run container
,然后使用display: inline-block
with vertical-align: middle
。 I also had to adjust by moving some margins and padding around. 我还必须通过移动一些边距和填充来调整。
HTML 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 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)
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.