如何将 p 放在 div 的中心？ [复制]答案

【问题标题】：how to put a p at the center of a div? [duplicate]如何将 p 放在 div 的中心？ [复制]
【发布时间】：2025-12-02 06:45:02
【问题描述】：

我有一个弹出窗口，我在 <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>'

【问题讨论】：

标签： html css styles padding text-align

【解决方案1】：

添加这个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*/
}

【讨论】：

但是我把 div 放在了页面的中心，我想要特殊的 paddings 但是 p 标签没有在彼此下方居中
你能详细说明一下并创建一个工作 plunker 吗？
我添加了一个图像，我希望两个文本是这样的，但不在页面的中心，我希望它们在页面上留下填充
将 padding-left 添加到 .sign。将 justify-content: center; 更改为 justify-content: flex-start; 希望这是您所期望的。
还是不行

【解决方案2】：

这对我来说是 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/ 的一个很好的资源

【讨论】：

【解决方案3】：

只需添加 { display: block; } 到 .sign 类，然后 text-align 将起作用。

【讨论】：