如何将p放在a div的中心？

Question

我有一个弹出窗口 window，我在 <div> 中有 2 个 <p> div 有 padding-left 和 padding-right，我想将 p 标签放在 div 的中间。我应该怎么做？

代码如下：

<div class="sign"><p class="sign_text"> ' + sign + '</p> <p class="sign_text"> ' + this.sender + '</p> <div>

风格

'.sign{padding-left: ' + this.sign_padding_left + ';' +
  'padding-right: ' + this.sign_padding_right + ' +; font-family: IRANSharp;}' + 
  '.sign_text{margin-bottom: 0px; text-align: center}</style>'

Answer 1

这对我来说是 flexbox 的一个很好的用途。

尝试这样的事情：

div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

p { // use a class obviously
  display: inline-block;
}

这是一个很好的 flexbox 资源 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

添加这个css

.sign{
  display: flex;
  flex-direction: column;
  justify-content: center; // align horizontally center
  aligns-items: center;  // align vertically center
}

编辑 1：根据您添加的图像

.sign{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}

p{
  display:block;
  text-align:center;
  width: 80%; /*Change this for left adjustment*/
}

Answer 3

只需添加{ display: block; } 到 .sign class 然后文本对齐将起作用。

如何将p放在a div的中心？

how to put a p at the center of a div?

html

css

styles

text-align

padding