如何将一个 p 标签放在一个 div 中央？

9 浏览
0 Comments

如何将一个 p 标签放在一个 div 中央？

我有一个弹出窗口，其中有两个标签在一个标签内。这个

标签有padding-left和padding-right，我想将

标签放在

标签的中间。我该怎么做呢？

以下是代码：

' + sign + '


' + this.sender + '

样式如下：

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

这是我想要的效果，但它不应该在页面的中间，我希望这部分有左右的内边距：

这是我想要的效果，但它不应该在页面的中间，我希望这部分有左右的内边距

0

3 答案

0 Comments

问题出现的原因是没有设置div的display属性为block，导致text-align属性无法起作用。解决方法是给.sign类添加display:block属性。示例代码如下：

.sign {
  display: block;
}

0
0 Comments

问题：如何将p标签居中放置在一个div中？

原因：可能是因为需要在一个div中居中放置一个p标签，但是不清楚如何实现。

解决方法：使用flexbox布局可以很好地解决这个问题。

代码示例：

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

参考资源：[https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

0
0 Comments

问题出现的原因是希望在一个div中将p标签居中显示，但是原先的CSS样式无法实现这一效果。通过添加一些CSS样式，可以解决这个问题。

首先，可以使用以下CSS样式实现将p标签在div中水平和垂直居中显示的效果：

.sign{
  display: flex;
  flex-direction: column;
  justify-content: center; // 水平居中对齐
  aligns-items: center;  // 垂直居中对齐
}

然后，根据问题中提到的图片，可以使用以下CSS样式将div在页面中居中显示，并使p标签在div中左对齐：

.sign{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}
p{
  display:block;
  text-align:center;
  width: 80%; /* 根据需要调整左边距 */
}

如果上述方法无法解决问题，可以尝试添加左边距来实现左对齐的效果。将`justify-content: center;`改为`justify-content: flex-start;`，并在.sign中添加左边距：

.sign{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  padding-left: 20px; /* 根据需要调整左边距 */
}

如果仍然无法解决问题，可以尝试基于提供的图片和更多信息创建一个可工作的示例。

0