如何让带引号的文本实现完美居中对齐？

针对text-align:center导致引号干扰视觉居中的问题，这里有两个适配动态内容、兼容Chrome的实用方案：

方案一：用CSS伪元素插入引号 #

把引号从文本内容中剥离，通过:before和:after伪元素添加。这样文本本身不受引号宽度影响，自然居中，引号会自动贴合文本两侧，完美适配动态内容和多行场景。

修改后的代码如下：

CSS代码 #

#container {
  width: 400px;
  height: 300px;
  font-family: Arial;
  background: lightblue;
}

#container>div {
  margin-top: 40px;
  text-align: center;
  font-size: 30px;
}

#container>div:first-child {
  color: green;
}

#container>div:last-child {
  color: red;
}
/* 新增伪元素样式 */
.quoted-text:before {
  content: '"';
}
.quoted-text:after {
  content: '"';
}

HTML代码 #

<div id="container">
  <div>
    This alignment<br>looks good to the eye
  </div>
  <div class="quoted-text">
    This alignment does<br>not look so good to the eye
  </div>
</div>

方案二：用Flex布局分离引号与文本 #

如果需要更灵活控制引号位置，可以把文本和引号拆成独立元素，通过flex布局让文本居中，引号固定在两侧，同样适配动态内容：

CSS代码 #

#container {
  width: 400px;
  height: 300px;
  font-family: Arial;
  background: lightblue;
}

#container>div {
  margin-top: 40px;
  text-align: center;
  font-size: 30px;
}

#container>div:first-child {
  color: green;
}

#container>div:last-child {
  color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}
.quote {
  /* 可选：调整引号与文本的间距 */
  margin: 0 8px;
}
.text-content {
  text-align: left;
}

HTML代码 #

<div id="container">
  <div>
    This alignment<br>looks good to the eye
  </div>
  <div>
    <span class="quote">"</span>
    <span class="text-content">This alignment does<br>not look so good to the eye</span>
    <span class="quote">"</span>
  </div>
</div>

为什么之前的方法无效？ #

• hanging-punctuation: first last：Chrome对双引号的悬挂支持不完善，多行文本场景下效果不稳定。
• text-indent: -3em：固定缩进值无法适配动态变化的文本长度和字体大小，通用性差。

内容的提问来源于stack exchange，提问作者Philip