Question

我有这个样本：

CSS和HTML：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

在这个div中，我的文字意味着是当前的形式。

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

提前致谢！

Answer 1

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

将text-align: center;添加到p
在文字

span

使用span添加新的display: inline-block;选择器，使span中心与p和text-align: left;相关，以移动其文字在左边

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

你也可以试试这个，

为内容添加<span>标记并添加此css

p span{ display: table;margin:auto;}

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

如何在左侧位置对齐中心文本？

2 个答案: