Question

div文字居中时，我的div文字未显示。我将width分配给div。文字应该出现在next行。< / p>

这是我的代码

body,html{
  width:100%;
  height:100%;
  background:blue
}
.centered {
  width:100%;
  height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align:center;
  background: red; /* not necessary just to see the result clearly */
}

.abc{
  background: #fff;
  width:200px;
  height:400px;
  line-height:400px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="centered">
  <div class="abc">This text is centered horizontally and vertically</div>
</div>

</body>
</html>

Answer 1

line height导致问题，当你有换行符时，下一行将在400px之后，但你的div只有400px因此你将有一个溢出因为高度内容为800px（2行）。删除line-height并在div中应用中心。 Line-height仅用于居中一行文字。

＆＃13;

body,
html {
  width: 100%;
  height: 100%;
  margin:0;
  background: blue
}

.centered {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: red;/* not necessary just to see the result clearly */
}

.abc {
  background: #fff;
  width: 200px;
  height: 300px;
  display: flex;
  align-items: center;
    text-align:center;
}

＆＃13;

<div class="centered">
  <div class="abc">This text is centered horizontally and vertically</div>
</div>

＆＃13;

Answer 2

line-height: 400px;类中的abc样式导致第二行消失。它低于显示屏并且不在视线范围内。删除line-height会将文本恢复，但您的文本将位于abc容器的顶部。您可以通过多种方式垂直居中。我建议在<p>标记中包装文本“此文本水平和垂直居中”，然后应用以下CSS：

.abc{
    background: #fff;
    width:200px;
    height:400px;
    position: relative;
}

.abc > p {
    transform: translateY(-50%);
    top: 50%;
    position: absolute;
    padding: 0;
    margin: 0;
}

您的HTML将如下所示：

<div class="abc">
    <p>This text is centered horizontally and vertically</p>
</div>

请查看此页面，了解有关其工作原理的更多信息：https://css-tricks.com/centering-css-complete-guide/。它还将提供更多关于居中文本的示例。

为什么我的文字在文本居中时不显示？

2 个答案: