如何在 1 个 div 元素中居中 1 个段落元素？答案

【问题标题】：How do I center 1 paragraph element in 1 div element?如何在 1 个 div 元素中居中 1 个段落元素？
【发布时间】：2015-11-13 07:09:01
【问题描述】：

我正在关注这个SO post here 并且 p 元素没有居中。

基本上，我为包含的 div 设置了宽度和高度，然后将文本对齐属性设置为 div 内 p 元素的居中。不行。

接下来我可以尝试什么？

包含的div是id=Y1aa

我现在只需要水平居中。

#Y1 {
  z-index: 4000;
  position: relative;
  width: 100%;
  height: 30px;
  background: #ffffff;
  opacity: .95;
}
#Y1a {
  position: relative;
  width: 320px;
  height: 30px;
  margin: 0 auto;
  border-left: dotted 1px #000000;
  border-right: dotted 1px #000000;
}
#Y1aa {
  position: relative;
  width: 320px;
  height: 30px;
  top: 5px;
}
.top {
  color: #000000;
  display: inline;
  font-size: 9px;
  font-weight: bold;
  font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
  text-align: center;
  line-height: 10px;
}

<div id='Y1'>
  <div id='Y1a'>

    <div id="Y1aa">
      <p class="top">Foo</p>
    </div>
  </div>
</div>

【问题讨论】：

@Unknow - 你是什么意思，它在你的浏览器中居中吗？
垂直居中还是水平居中？
@cadegalt 最好把代码贴出来，然后让我们去网站使用web inspector
那么，你可以使用text-align: center 还是什么意思？
@cadegalt 在您的top 班级中将display:inline 更改为display:block

标签： css

【解决方案1】：

或者，如果您需要将p 保留为inline 元素，您可以将text-align: center 添加到#Y1aa。

#Y1 {
  z-index: 4000;
  position: relative;
  width: 100%;
  height: 30px;
  background: #ffffff;
  opacity: .95;
}
#Y1a {
  position: relative;
  width: 320px;
  height: 30px;
  margin: 0 auto;
  border-left: dotted 1px #000000;
  border-right: dotted 1px #000000;
}
#Y1aa {
  position: relative;
  width: 320px;
  height: 30px;
  top: 5px;
  text-align: center;
}
.top {
  color: #000000;
  display: inline;
  font-size: 9px;
  font-weight: bold;
  font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
  text-align: center;
  line-height: 10px;
}

<div id='Y1'>
  <div id='Y1a'>
    <div id="Y1aa">
      <p class="top">O: 832-418-9180 M: 281-923-3638 S: 281-968-0727</p>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

您可以从 .top 类中删除：display: inline;。

#Y1 {
  z-index: 4000;
  position: relative;
  width: 100%;
  height: 30px;
  background: #ffffff;
  opacity: .95;
}
#Y1a {
  position: relative;
  width: 320px;
  height: 30px;
  margin: 0 auto;
  border-left: dotted 1px #000000;
  border-right: dotted 1px #000000;
}
#Y1aa {
  position: relative;
  width: 320px;
  height: 30px;
  top: 5px;
}
.top {
  color: #000000;
  font-size: 9px;
  font-weight: bold;
  font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
  text-align: center;
  line-height: 10px;
}

<div id='Y1'>
  <div id='Y1a'>

    <div id="Y1aa">
      <p class="top">O: 832-418-9180 M: 281-923-3638 S: 281-968-0727</p>
    </div>

【讨论】：

顺便说一句，您可以只删除display:inline 而不是添加display:block。 <p> 元素通常是 default to block-level。
@showdev 哦，真的:) 这种情况是的。但在第一版问题中 - 我从this 问题中获取代码并下意识地使用此代码:)
@showdev 我有点困惑——因为在第一个例子中他有` position: absolute`，我们应该在那里添加display: block;
添加也无妨，我只是觉得没必要，因为<p>元素的默认显示模式是block。

【解决方案3】：

将top 类中的display:inline 更改为display:block，或者一起删除display 样式。

【讨论】：

【解决方案4】：

要使 div 中的段落居中，您必须在段落的 CSS 样式中使用 margin 属性

在这个例子中，我将 div 中的第一段居中，类为 'wrap'

	.wrap p:first-child {
	    text-align:center;
	    margin: 0 auto;
	}

	<div class="wrap">
	    <p>Some p tag</p>
	</div>

【讨论】：

他的<p> 是position: absolute
为什么要这样做？问题清楚地写着：如何在 1 个 div 元素中居中 1 个段落元素？这是对这个问题的一个非常好的答案。现在 OP 可以将此方法应用于 OP 拥有的代码。