如何垂直对齐此div?

rpsep2

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

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

如何做到这一点,最好只是在CSS中?

我知道我可以在jquery中执行以下操作:

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

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

但身份证而不是!

伊泰

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何垂直对齐此导航栏?

来自分类Dev

如何垂直对齐此span元素?

来自分类Dev

Div垂直对齐

来自分类Dev

<div>垂直对齐

来自分类Dev

Div垂直对齐

来自分类Dev

如何在体内垂直对齐div?

来自分类Dev

如何使此图像和文本居中且div垂直对齐?

来自分类Dev

如何在CSS中创建此形状?(垂直对齐div)

来自分类Dev

如何将这个垂直对齐的div右对齐?

来自分类Dev

垂直对齐固定的div

来自分类Dev

使DIV在中间垂直对齐

来自分类Dev

div垂直对齐中心

来自分类Dev

垂直对齐选定的div

来自分类Dev

如何在div内部垂直对齐div?

来自分类Dev

引导程序如何使文本在div容器中垂直对齐

来自分类Dev

如何在div中垂直对齐2个类

来自分类Dev

如何在包含图像的div中垂直对齐链接?

来自分类Dev

如何使div以最紧凑的方式垂直对齐?

来自分类Dev

如何垂直对齐图像,即动态高度旁边的div

来自分类Dev

如何垂直对齐div的文本和图像中间?

来自分类Dev

如何垂直对齐两个div的内容?

来自分类Dev

如何在包含图像的div中垂直对齐链接?

来自分类Dev

如何像Pinterest这样在CSS中将div垂直对齐

来自分类Dev

如何在CSS的div中垂直对齐元素?

来自分类Dev

如何垂直对齐图像,即动态高度旁边的div

来自分类Dev

如何在div中居中和垂直对齐文本?

来自分类Dev

如何垂直对齐div的文本和图像中间?

来自分类Dev

如何垂直对齐div中的链接和按钮?

来自分类Dev

如何垂直对齐底部