html - 如何在左侧位置居中对齐文本？

Question

我有这个样本:

http://jsfiddle.net/3gmeK/298/

CSS 和 HTML:

div   { padding:10px 20px; background-color:#F51; }

p     { text-align:left; padding:5px; background-color:#333; color:#fefefe; }

<div>
  <p>
    There are many fish in the sea! So lovely!<br>
    many fish in the sea! So lovely!
  </p>
</div>

我希望当前形式的文本居中对齐。

我不想使用 "text-align: center;"

在这个 div 中，我的文本意味着采用当前形式。

我希望我能更好地解释他们想做什么。你能帮我解决这个问题吗？

提前致谢!

Answer 1

这可以通过在文本周围添加额外的 span 来完成:

• 添加 text-align: center; 到 p
• 在文本周围添加一个额外的span
• 使用 display: inline-block; 添加一个新的 span 选择器，使 span 相对于 p< 居中 和 text-align: left; 将文本向左移动

div {
  background-color: #F51;
  padding: 10px 20px;
}
p {
  background-color: #333;
  color: #fefefe;
  padding: 5px;
  text-align: center;
}
span {
  display: inline-block;
  text-align: left;
}

<div>
  <p>
    <span>There are many fish in the sea! So lovely!<br>
            many fish in the sea! So lovely!</span>
  </p>
</div>