如何在div中间对齐一个段落？

Question

使用几个 Angular 容器，我想在单元格中间对齐文本。不幸的是，垂直对齐不起作用。

特此代码：

main {
  height: 100%;
  text-align: center;
  padding-top: 6%;
  padding-left: 7%;
  padding-right: 7%;
  font-size: 1em;
}

.vertical-align {
  height: 100%;
}

p {
  position: relative;
  vertical-align: middle;
}

<main>
  <div class="vertical-align">
    <p>{{ data.text}}</p>
  </div>
</main>

你知道我该如何解决这个问题吗？

谢谢！

Answer 1

请参考基础html css参考

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

<!DOCTYPE html>
<html>

<body>
<div class="flex-container">
  <p>Content in center</p>
</div>

</body>
</html>

https://codepen.io/samuveljohns/pen/JjPWEVz

Answer 2

垂直对齐不适用于块元素。 p 标签是块元素

为了垂直居中你需要使用 flexbox

.vertical-align {
  height: 100%;
  display:flex;
  align-items:center;
}

参考下面的例子，也不是我为了例子把主容器的高度从 100% 改成 100vh

main {
  height: 100vh;/*for example purpose*/
  text-align: center;
  padding-top: 6%;
  padding-left: 7%;
  padding-right: 7%;
  font-size: 1em;
}

.vertical-align {
  height: 100%;
  display:flex;
  align-items:center;
  border:1px solid red;/*for example purpose*/
}

p {
  position: relative;
  /*vertical-align: middle;*/
}

<main>
  <div class="vertical-align">
    <p>lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem </p>
  </div>
</main>

Answer 3

w3schools 上有一个关于如何使用位置和变换使垂直和水平居中的简单示例。

这是一个工作示例。

.center { 
  height: 100vh; /* 100vh is used for fullscreen, set your div height here instead. */
  position: relative;
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<main>
  <div class="center">
    <p>test</p>
  </div>
</main>

Answer 4

使用 text-align center 使您的段落居中

.center p
{
     text-align: center;
}

如何在div中间对齐一个段落？

How to align a paragraph in the middle of the div?

html

css

alignment

boilerplate

angular