Html 如何使用CSS将文本垂直居中对齐？_Html_Css_Alignment

Html 如何使用CSS将文本垂直居中对齐？

html css

Html 如何使用CSS将文本垂直居中对齐？,html,css,alignment,Html,Css,Alignment,我有下面的代码。我无法使它在分区的中心对齐。请告诉我一些建议好吗？谢谢 <!DOCTYPE html> <html> <head> <style> .center { margin: auto; width: 70%; height:100px; background-col

我有下面的代码。我无法使它在分区的中心对齐。请告诉我一些建议好吗？谢谢

<!DOCTYPE html>
<html>
    <head>
        <style>
            .center {
                margin: auto;
                width: 70%;
                height:100px;
                background-color: yellow;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div class="center">How to get this text aligned in the center?</div>
    </body>
</html>


.中心{
保证金：自动；
宽度：70%；
高度：100px；
背景颜色：黄色；
文本对齐：居中；
}
如何使此文本在中心对齐？

您需要线条高度和垂直对齐：中间属性

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

为了详细说明@Leo所说的话，下面是多行代码：

您需要线条高度和垂直对齐：中间属性

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

为了详细说明@Leo所说的话，下面是多行代码：

使用

如果有多行，则应使用

display:table-cell

使用

如果有多行，则应使用

display:table-cell

如果需要将多行文字居中。然后使用

显示：表格单元格检查
.center {
    margin: auto;
    width: 70%;
    height:100px;
    background-color: yellow;
    text-align:center;
  display: table-cell;
  vertical-align:middle;
}

.center {
margin: auto;
width: 70%;
height:100px;
background-color: yellow;
text-align:center;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align Vertical */
}

更新：
如果您只支持最新的浏览器，则还可以使用CSS3Flex
Property。选中
.center {
    margin: auto;
    width: 70%;
    height:100px;
    background-color: yellow;
    text-align:center;
  display: table-cell;
  vertical-align:middle;
}

.center {
margin: auto;
width: 70%;
height:100px;
background-color: yellow;
text-align:center;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align Vertical */
}

如果需要将多行文字居中。然后使用显示：表格单元格检查
.center {
    margin: auto;
    width: 70%;
    height:100px;
    background-color: yellow;
    text-align:center;
  display: table-cell;
  vertical-align:middle;
}

.center {
margin: auto;
width: 70%;
height:100px;
background-color: yellow;
text-align:center;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align Vertical */
}

更新：
如果您只支持最新的浏览器，则还可以使用CSS3Flex
Property。选中
.center {
    margin: auto;
    width: 70%;
    height:100px;
    background-color: yellow;
    text-align:center;
  display: table-cell;
  vertical-align:middle;
}

.center {
margin: auto;
width: 70%;
height:100px;
background-color: yellow;
text-align:center;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align Vertical */
}

如果高度
是固定的，则对行高度
使用相同的值
height:100px;
line-height: 100px;

垂直对齐：中间对齐不是必需的
但是，如果高度是动态的，请使用：
display: table-cell;
vertical-align:middle;

如果高度
是固定的，则对行高度
使用相同的值
height:100px;
line-height: 100px;

垂直对齐：中间对齐不是必需的
但是，如果高度是动态的，请使用：
display: table-cell;
vertical-align:middle;

div
有多行文本还是只有一行？如果只有一个，则设置行高：100px
（等于div的高度）。div
有多行文本还是只有一行？如果只有一个，则设置行高：100px（等于div的高度）。+1但是，请注意，这仅适用于一个衬里。多行会破坏设计，没错。我的问题实际上在于有多行。有办法解决这个问题吗？谢谢。@schenker除非您使用的是display:table cell
+1，否则无法轻松做到这一点。但是，请注意，这只适用于一行程序。多行会破坏设计，没错。我的问题实际上在于有多行。有办法解决这个问题吗？谢谢。@schenker要做到这一点并不容易，除非您使用的是display:table cell
+1这是最接近、最整洁的方法，您可以将内容垂直放置在中心位置！作品非常感谢！显示：表格单元格在IE7中不起作用。很多人仍然需要支持这个浏览器，因为微软仍然支持它。当然，flex box也不起作用。@KheemaPandey-我不会称之为polyfill。。它实际上用不同的标记替换html，多填充通过替换行为而不是结构来工作。。。这可能会产生非常恶劣的副作用，更不用说完全改变文档的语义了。这是一个可怕的解决方案。。。除此之外，它还需要非标准的css扩展标记，-dt table等。。这是一个丑陋的“解决方案”，根本不是解决方案。。。polyfill的全部意义在于，您可以将其添加到页面中，而无需修改标记，也无需修改标记以使其正常工作。。。相反，这创造了更多的非标准丑陋，用表格代替标记。。。“治疗”比“问题”更糟糕。如果您需要IE7兼容性，我建议您找到一个不同于“显示：表格”的解决方案。+1这是最接近、最整洁的解决方案，您可以将内容垂直放置在中心位置！作品非常感谢！显示：表格单元格在IE7中不起作用。很多人仍然需要支持这个浏览器，因为微软仍然支持它。当然，flex box也不起作用。@KheemaPandey-我不会称之为polyfill。。它实际上用不同的标记替换html，多填充通过替换行为而不是结构来工作。。。这可能会产生非常恶劣的副作用，更不用说完全改变文档的语义了。这是一个可怕的解决方案。。。除此之外，它还需要非标准的css扩展标记，-dt table等。。这是一个丑陋的“解决方案”，根本不是解决方案。。。polyfill的全部意义在于，您可以将其添加到页面中，而无需修改标记，也无需修改标记以使其正常工作。。。相反，这创造了更多的非标准丑陋，用表格代替标记。。。“治疗”比“问题”更糟糕。如果您需要IE7兼容性，我建议您找到与“display:table”不同的解决方案。