如何将内容与文本框居中对齐？
如何将内容与文本框居中对齐？
提问于 2017-10-30 10:08:10
我必须完成一个组合框来选择时间。正如您所看到的，上下文"from“并没有绑定到combobox。
这两个dives的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不工作？
回答 4
Stack Overflow用户
发布于 2017-10-30 10:14:28
您还可以使用：
#idMessage
{
position: absolute;
top: 50%
}在单独的.css文件中。
顶部不一定是50%，只需使用百分比，直到您得到它想要的位置
Stack Overflow用户
发布于 2017-10-30 10:42:39
试试这个：
#fromMessage,
#selectTime {
display: inline-block;
vertical-align: middle;
float: none;
}Stack Overflow用户
发布于 2017-10-30 15:41:02
垂直对齐方法只有在表中使用或元素是内联块元素时才有效，但需要指定使用父级的height的任何一种方法才能使其工作。
唯一不需要高度要求的方法是使用flexbox。
有几种方法可以垂直居中元素，下面是其中一种方法。
垂直居中的关键是：
自动修复height
- absolute positioning
- margin
- 0顶值
- 0底值
示例：
#fromMessage{
width: 30px;
float: left;
padding-left: 50px;
height: 30px; /*fix height*/
position: absolute;
margin: auto;
top: 0;
bottom: 0;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47007231
复制相关文章
相似问题
腾讯云开发者
