使用 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

添加这条规则

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 2

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

示例：

.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 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;

因此，它在所有尺寸的显示器中居中。

使用 css 将文本置于中心

Bringing text down into the center with css

html

css

padding