在黑莓上垂直对齐 html 输入文本答案

【问题标题】：Vertical align html input text on Blackberry在黑莓上垂直对齐 html 输入文本
【发布时间】：2012-08-17 07:51:24
【问题描述】：

有人知道如何在黑莓设备上将输入类型文本中的文本居中吗？

这是我的 CSS：

.input_text {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    color: #333333;
    text-align: left;
    border: 1px solid #cccccc;
    vertical-align: middle; 
    width: 305px;
    height: 38px;
    line-height: 38px;
    vertical-align: middle;
    -webkit-appearance: none; 
    -webkit-border-radius:0px;
    -moz-border-radius:0px;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    box-align: center;
}

它适用于除黑莓以外的所有浏览器/设备。

【问题讨论】：

垂直对齐有点麻烦。它在大多数元素上都无法按预期工作。你的文本框是多行的还是单行的？
文字目前在BB上做什么？是否与底部对齐？如果是这样，在输入字段中添加与顶部空间相等的填充可能会解决您的问题。

标签： html css blackberry text input

【解决方案1】：

您可以使用填充来代替巨大的line-height 和vertical-align: middle：

.input_text {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    color: #333333;
    text-align: left;
    border: 1px solid #cccccc;
    width: 305px;
    height: 38px;
    padding: 12px 0; /***  12px = (38px - 14px) / 2  ***/ 
    -webkit-appearance: none;
}

【讨论】：