如何实现文本居中且p元素自适应贴合文本内容

这个问题的核心在于块级元素<p>的默认行为：它会自动占满父元素的可用宽度，哪怕文本内容很短，也会撑满父<div>的宽度，导致看起来尺寸远大于文本本身。要实现「<p>贴合文本+文本在<p>内居中+文本贴近绿色边框」的效果，给你几个简单可行的方案：

方案1：把<p>改成inline-block #

inline-block元素的宽度会自适应内容，同时还能保留块级元素的样式特性（比如背景色、内边距这些都能正常设置），是最直接的解决办法。

调整后的完整代码：

#container { 
  width: 270px; 
  display: flex; 
  justify-content: space-between; 
  border: 2px green solid; 
}
div { 
  border: 2px black solid; 
  text-align: center; /* 让inline-block的p在div里居中 */
}
p { 
  text-align: center; /* 文本在p内部居中 */
  display: inline-block; /* 关键：让p的宽度匹配文本 */
  font-family: "Times New Roman"; 
  font-size: 16px; 
  background-color: yellow; 
  margin: 0; /* 去掉p默认的上下外边距，避免多余空白 */
}

效果说明：

• <p>的宽度会完全贴合文本内容
• 文本在<p>内保持居中对齐
• 父<div>会自适应<p>的宽度，再加上容器的justify-content: space-between，两个<div>会分别贴近绿色容器的左右边框，间接让文本贴近绿色边框

方案2：使用width: fit-content #

fit-content是CSS3的新特性，它能让元素宽度收缩到刚好容纳内容的尺寸，同时保持块级元素的属性。

调整后的CSS代码：

#container { 
  width: 270px; 
  display: flex; 
  justify-content: space-between; 
  border: 2px green solid; 
}
div { 
  border: 2px black solid; 
}
p { 
  text-align: center; /* 文本在p内部居中 */
  width: fit-content; /* 让p宽度自适应文本 */
  margin: 0 auto; /* 让p在div里水平居中 */
  font-family: "Times New Roman"; 
  font-size: 16px; 
  background-color: yellow; 
}

这个方案和方案1效果一致，区别在于<p>依然是块级元素，通过margin: 0 auto实现自身在父<div>内的居中。

额外优化：简化结构（如果不需要父<div>的边框） #

要是你不需要黑色的<div>边框，甚至可以直接把<p>作为容器的flex子元素，结构更简洁，还能让文本直接贴近绿色边框：

简化后的CSS：

#container { 
  width: 270px; 
  display: flex; 
  justify-content: space-between; 
  border: 2px green solid; 
  align-items: center; /* 让两个p垂直居中 */
}
p { 
  text-align: center; 
  display: inline-block; 
  font-family: "Times New Roman"; 
  font-size: 16px; 
  background-color: yellow; 
  margin: 0; 
}

对应的HTML：

<div id="container">
  <p>Small text</p>
  <p>This is another small paragraph</p>
</div>

这样两个<p>会分别紧贴绿色容器的左右边框，自身宽度完美匹配文本，文本在内部居中，完全符合你的需求~

内容的提问来源于stack exchange，提问作者Charles.C