css - 如何在div中间显示div的内容

Question

我正在使用 asp.net。我想在中间显示 div 的内容。但它在顶部显示内容。我的 div 如下：

    <div style=" height:100px; width:100px; float:left; background:#666666;">
     <span>about us</span>
    </div>

我怎样才能在中间显示内容。我使用了边距和填充，但它在整个 div 中显示结果而不是内容。我该怎么做，请帮助我是 asp.net 的新手。

谢谢你

Answer 1

试试这个：

   <div style=" height:100px; width:100px; float:left; background:#666666;text-align:center">
     <span>about us</span>
    </div>

Answer 2

如果你想水平对齐，Bibhu 的回答就可以了。

要在中间垂直对齐，请将其添加到您的样式中：

line-height: 100px;
vertical-align: middle;

Answer 3

只需删除 float:left 并添加 text-align 属性和 line-height 属性。

<div style=" height:100px; width:100px;background:#666666;text-align:center;line-height:100px;">
     <span >about us</span>
</div>

Answer 4

试试这个：

height:100px; width:100px; background:#666666; line-height:100px;

Answer 5

您需要将 div 的显示更改为 table-cell，然后您可以使用给定的 vertical-align 属性

 <div style=" height:100px; width:100px; float:left; background:#666666; display: table-cell; vertical-align: middle">
     <span>about us</span>
    </div>

核实

Answer 6

参考 -如何将 div 中的文本垂直中心与 css 对齐

它解释了如何通过许多演示精美地集中文本。