用css将文本带到中心

Question

您好我的网站需要一些帮助。从我提供的图像可以看出，我需要将文本置于矩形框中间的中心。我该怎么做呢？

我的css是，

.extendcontainer {
    background: rgba(255,255,255,0.1); // Transparent White Background
    background: #fff; // Left as a fallback for older browsers
    color: #FFFFFF;
}

Answer 1

设置框的高度和框的行高相同。

示例：

.extendcontainer {
    background: rgba(255,255,255,0.1); // transparent white
    background: #fff; // Left as a fallback for older browsers
    color: #FFFFFF;
    height:30px;
    line-height:30px;
}

虽然

不适用于多行

Answer 2

添加此规则

padding-top:40%;

喜欢这个

.extendcontainer {
    background: rgba(255,255,255,0.1); // transparent white
    background: #fff; // Left as a fallback for older browsers
    color: #FFFFFF;
    padding-top:40%;
}

您可以使用%进行调整。

Answer 3

您可以使用vertical-align: middle;

.extendcontainer {
    background: rgba(255,255,255,0.1); // transparent white
    background: #fff; // Left as a fallback for older browsers
    color: #FFFFFF;
    vertical-align: middle;
}

Answer 4

如果文本总是在一行上，则使用行高可能是最简单的。

看起来你的容器高38像素。要准确居中文本，请尝试添加以下内容：

.extendcontainer {

  line-height:38px;
  height:38px;
}

Answer 5

使用padding-top可能会显示您当前正在查看的屏幕的中心内容。如果从较大尺寸的显示器看到相同的页面，则可能不是。非常感谢使用

vertical-align: middle;

因此，它以所有尺寸的显示器为中心。