我已转向this guide来解决我在div中垂直居中文字的问题。而且我相信要理解它所说的内容,但它仍然不起作用。
.number {
position: relative;
height:50px;
margin: -25px 0 0 0;
top: 50%;
background-color: #00ff00;
}
这是fiddle,它重现了这个问题。我希望绿色区域(.number)在按钮(.numberElement)
中垂直居中我的问题在哪里?我认为jQuery Mobile使事情变得复杂并且创造了我无法预见的结构......
谢谢!
桑德罗
答案 0 :(得分:1)
您需要对css进行一些更改,如下所示:
.numberElement {
position: absolute;
width:30%;
height:200px;
margin:0px;
display:table;
}
.numberElement .ui-btn-inner {
display:table-cell;
vertical-align:middle;
}
的 Working Demo 强>
答案 1 :(得分:0)
.number的顶级属性不能正常工作,正如我在你的小提琴中看到的那样。尝试将其从顶部更改为margin-top。它将以margin-top为中心:60px;
也不要忘记删除.number中的行
margin: -25px 0 0 0;
答案 2 :(得分:0)
这是我想的正确答案
.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;
}