垂直居中的文本在div中不起作用

我已经转向this guide来解决我在div内垂直居中文本的问题。我相信要理解它所说的内容，但它仍然行不通。垂直居中的文本在div中不起作用

.number { 
    position: relative; 
    height:50px; 
    margin: -25px 0 0 0; 
    top: 50%; 
    background-color: #00ff00; 
}

这是fiddle，它重新创建问题。我想让绿色区域（。数字）在按钮内垂直居中（.numberElement）

我的问题在哪里？我认为jQuery Mobile是复杂的事情和创建结构，我不会预见...

谢谢！

桑德罗

来源

2013-04-09 Sandro

你。数的顶级物业工作不正常，因为我可以在你的小提琴看到。尝试将其从顶部更改为页边距。它将围绕margin-top：60px;

而且不要忘记删除线。数

margin: -25px 0 0 0;

来源

2013-04-09 06:04:51

嘿家伙！谢谢你的回答...你的回答，弗里曼，把重点放在了正确的位置上。其他人在我看来没有。虽然是这样，但我并没有明确提到这一点，不幸的是，我希望它的中心位置与.numberElement的高度无关 – Sandro 2013-04-10 11:07:06

对不起，我刚刚看到您的评论。将您的保证金顶部设置为百分比单位。边距：50％;可以工作。 PS：出于某种原因，我不能打开你的小提琴 – 2013-04-11 14:39:38

它仍然存在。刚刚检查:-) 这是我一起去的文章的想法是。将顶部设置为50％，那么它应该在垂直中间有上边缘，对吧？然后在.number元素高度的一半处设置一个负余量，以便将其向上推足够高......作者甚至建议我可以使用百分比值来分配该日期。这是我目前的解决方案：http://jsfiddle.net/5A9HP/6/，它仍然不像文章中那样。到目前为止，工程虽然从DIV带走了数据角色=“按钮”属性肯定是一个帮助桑德罗 – Sandro 2013-04-12 05:01:22

这里是正确的答案，因为我觉得

.numberElement { 
    position: absolute; 
    width:30%; 
    height:200px; 
    margin:0px; 
} 

.number { 
    position: relative; 
    height:50px; 
    margin: 50px 0; 
    line-height:50px; 
    top: 50%; 
    background-color: #00ff00; 
} 

#grid { 
    position:absolute; 
    padding:0px; 
    margin:0px; 
    border:solid 1px #ff0000; 
    height:400px; 
    width:400px; 
}

来源

2013-04-09 06:06:39 Homam

这居中。数元素中的1，但遗憾的是并没有在内部.numberElement中心。数所有。我上面发布的东西似乎仍然是迄今为止最好的解决方案 – Sandro 2013-04-15 06:21:48

嗨，你不能只使用jquery height（）？并用它来计算中心片的位置？我认为这只是简单吗？ – Homam 2013-04-15 06:31:45

嘿Homam！这很可能会起作用，但不是完全可以避免这种情况的CSS？不能相信这是如此棘手...... – Sandro 2013-04-16 05:26:55

你需要作出一些改变你的CSS像这样：

.numberElement { 
    position: absolute; 
    width:30%; 
    height:200px; 
    margin:0px; 
    display:table; 
} 

.numberElement .ui-btn-inner { 
    display:table-cell; 
    vertical-align:middle; 
}

Working Demo

来源

2013-04-09 06:08:15 Eli

垂直居中的文本在div中不起作用

回答

相关问题