在具有固定高度的div中，没有办法垂直对齐文本吗？

17 浏览
0 Comments

在具有固定高度的div中，没有办法垂直对齐文本吗？

可能是重复问题：
\n使用jQuery在屏幕上居中一个DIV\n我知道在表格中可以实现，但是现在没有办法自动垂直居中（在中间）的文本吗？我简直不敢相信...\n我的代码：\n

HTML

\n

    这是我的文本
​

\n

CSS

\n

.content
{
    宽度：80像素；
    高度：150像素；
    背景颜色：#aeaeae；
}

0

3 答案

0 Comments

这个问题的出现是由于在一个具有固定高度的div中垂直对齐文本的方法无法实现。解决方法是使用display: table-cell和vertical-align: middle属性来实现垂直对齐。

在给定的代码中，使用了display: table-cell属性来创建一个表格单元格，并使用vertical-align: middle属性将文本垂直居中。这种方法在大多数现代浏览器中有效。

然而，这种方法在IE7中不起作用。因此，解决该问题的方法是使用条件注释或JavaScript来检测并应用不同的样式规则，以解决IE7不支持的问题。

以下是使用条件注释的解决方法：

在这个解决方法中，我们使用了条件注释来仅在IE7中应用特定的样式规则。我们将div的display属性设置为block，position属性设置为relative，并使用top和transform属性来将内容向上偏移并垂直居中。

另一种解决方法是使用JavaScript来检测浏览器版本并应用相应的样式规则。以下是一个示例：

var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 && parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))) == 7) {
    document.getElementsByClassName("content")[0].style.display = "block";
    document.getElementsByClassName("content")[0].style.position = "relative";
    document.getElementsByClassName("content")[0].style.top = "50%";
    document.getElementsByClassName("content")[0].style.transform = "translateY(-50%)";
}

在这个解决方法中，我们使用了JavaScript来检测浏览器版本，如果是IE7，则将相应的样式规则应用于具有类名为"content"的元素。

通过以上的解决方法，我们可以解决在具有固定高度的div中垂直对齐文本的问题，并且可以在大多数现代浏览器中正常工作，包括支持IE8+。

0
0 Comments

在一个固定高度的div中垂直对齐文本并没有直接的方法。这个问题的原因是HTML和CSS在垂直对齐方面的限制。然而，有几种解决方法可以实现这个效果。

解决方法1：使用display:table属性


  

    垂直对齐的文本

使用display:table和display:table-cell属性可以模拟表格的布局，从而实现文本的垂直对齐。

解决方法2：使用flexbox布局


  垂直对齐的文本

使用flexbox布局可以轻松实现文本的垂直对齐。通过设置align-items属性为center可以将文本垂直居中。

解决方法3：使用position属性和transform属性


  

    垂直对齐的文本

通过使用position:relative和position:absolute属性，再结合transform:translateY属性，可以将文本垂直居中。

以上是几种常见的解决方法，可以根据具体情况选择适合的方法来实现文本的垂直对齐。

0
0 Comments

在一个具有固定高度的div中垂直对齐文本是不可能的吗？

这个问题的原因是，垂直对齐文本在HTML和CSS中是一个相对复杂的问题。在div中使用固定高度时，垂直对齐变得更加困难，因为div的高度是固定的，而文本的高度是可变的。

然而，有一种解决方法可以实现在具有固定高度的div中垂直对齐文本。只需向你的div添加以下CSS样式：display: table-cell; vertical-align: middle;。这将使div的内容垂直居中对齐。你可以在这个链接中查看一个演示。

然而，要使这个方法在IE7中也能正常工作，你需要使用另一个链接中提到的方法。这个链接提供了一个HTC插件，可以检测浏览器是否为IE6/7，并用实际的HTML表格替换带有display: table-*;属性的元素。

虽然上述链接提供了解决方案，但SO回答应该更加“自成体系”，不依赖于外部链接的状态来保持有用性。

这个外部链接是指向一个插件的链接。我应该在我的回答中只发布HTC的内容吗？

为什么你更喜欢无意义的链接文本？

0