表格行中div中标签的水平和垂直对齐

Posted 2023-03-05

【中文标题】表格行中div中标签的水平和垂直对齐

【英文标题】：horizontal and vertical alignment of label in div in table row

【发布时间】：2011-04-27 00:10:09

【问题描述】：

我有代码：

<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 的左上角。

【问题讨论】：

将你的 style="text-align: center; vertical-align: middle" 转换为 div

我对 div 的风格有这样的看法。如果你向右滚动。

【参考方案1】：

如果高度肯定是50px，设置label的line-height CSS为50px；

要水平获取中间的标签，设置 margin-left:auto;和margin-right:auto;

【讨论】：

所以这是一个完整的表格。所以有些标签会换行并占据两行。

自动水平边距只有在您定义明确的宽度时才会起作用，我很确定。

我可以为标签定义一个解释宽度。它位于具有定义宽度的单元格中。我会试试的。但我仍然有垂直对齐的问题。

【参考方案2】：

如果你有不止一行，你不能使用line-height属性来破解中间对齐。

最简单的方法是使用顶部和底部填充。

【讨论】：

呃。所以基本上，如果我想让内容在运行时通过 javascript 决定，我就搞砸了......除非我让 JavaScript 决定文本是否会被换行以及它需要多少行，然后相应地设置填充......？

@kralco626 是的，或者尝试使用padding。您也可以使用中间对齐技巧，但 IE 很难看（用 2 个 div 包装）。请参阅博客中链接的文章:)