如何集中将内容与文本框对齐？

Question

我必须完成一个组合框来选择时间。 如您所见，来自＆＃34;来自＆＃34;没有提到组合框。

两次潜水的HTML代码是：

<div id="fromMessage" style="width:30px;height:100%;float:left;padding-left: 50px;vertical-align:central">
    <oj-label for="Time" style="font-size: 15px">From:</oj-label>
</div>

<div id="seelctTime" style="width:300px;height:100%;float:left;padding-left: 50px">           
    <oj-input-date-time id="Time" value='{{time}}' on-value-changed="{{timeChanged}}">
    </oj-input-date-time>
</div>

为什么vertical-align:central不起作用？

Answer 1

您也可以使用：

#idMessage
{
    position: absolute;
    top: 50%
}

在单独的.css文件中。

top不一定是50％，只是玩百分比直到你得到它想要的地方

Answer 2

试试这个：

#fromMessage,
#selectTime {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

Answer 3

只有在表中使用它时，或者当元素是内联块元素时，才能使用垂直对齐方法，但无论您使用哪种方法，需要指定高度才能使其正常工作。

唯一不需要高度的方法是使用 flexbox 。

您可以通过几种方法垂直居中元素，下面是其中一种方法。

垂直居中的关键是：

• 修复身高
• 绝对定位
• margin auto
• 0最高价值
• 0最低价值

示例：

    #fromMessage{
      width: 30px;
      float: left;
      padding-left: 50px;
      height: 30px; /*fix height*/
      position: absolute;
      margin: auto;
      top: 0;
      bottom: 0;
    }

Answer 4

#fromMessage, #selectTime {
  width:30px;
  height:100%;
  float:left;
  padding-left: 50px;
  vertical-align:middle;
}