表行中 div 中标签的水平和垂直对齐
我有代码:
<tr>
<td align="center" style="height: 50px; text-align: center; vertical-align: middle" >
<div class="hoverClass ui-widget-content ui-corner-all" style="text-align: center; vertical-align: middle;width:100%;height:100%">
<label style="text-align: center; vertical-align: middle" >Streetlight Repair</label>
</div>
</td>
</tr>
我希望它是一个带有包含标签的 div 的单元格。 我希望 div 占据整个单元格。以及要在 div 内居中的标签。然而,标签位于 div 的左上角。
I have code:
<tr>
<td align="center" style="height: 50px; text-align: center; vertical-align: middle" >
<div class="hoverClass ui-widget-content ui-corner-all" style="text-align: center; vertical-align: middle;width:100%;height:100%">
<label style="text-align: center; vertical-align: middle" >Streetlight Repair</label>
</div>
</td>
</tr>
I want it to be a cell with a div containing a label.
I want the div to take up the whole cell. and the label to be centered within the div. However the label sits at the top left of the div.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
如果高度肯定是50px,则将标签的line-height CSS设置为50px;
要使标签水平居中,请设置 margin-left:auto;和 margin-right:auto;
If the height is definitely 50px, set the line-height CSS of the label to 50px;
To get the label in the middle horizontally, set margin-left:auto; and margin-right:auto;
如果有多于一行,则无法使用
line-height
属性来修改中间对齐方式。最简单的方法是使用顶部和底部填充。
If you have more than one line, you can not use the
line-height
property to hack middle alignment.Easiest way is to play with top and bottom padding.