如何对齐左侧中心的文字？ [英] How can align text in a center in left position?

问题描述

我有这样的例子：

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

CSS和HTML：

  div {padding：10px 20px;背景色：＃F51; } p {text-align：left;填充：5像素;背景色：＃333;颜色：#fefefe; }  

< div> < p为H.海中有许多鱼！太可爱了！< br>海中有许多鱼！好可爱！ < / div>

我不想使用text-align：center;


在这个div里面，我的文本意味着处于当前的形式。

我希望我设法你可以帮我解决这个问题吗？

提前致谢！

解决方案

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

• 添加 text-align：center; 至 p


• 在文字周围添加额外的 span 添加新的 span display：inline-block; 选择选择器以使跨度中心相对于 p 和 text-align：left; 将文字左移

div {background-color：＃F51; padding：10px 20px;} p {background-color：＃333;颜色：#fefefe;填充：5px; text-align：center;} span {display：inline-block; text-align：left;}

< div> < p为H. < span>海中有许多鱼！太可爱了！< br>海中有许多鱼！太可爱了！< / span> < / div>

I have this sample:

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

CSS and 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>

I want my text in its current form is aligned in the center.

I do not want to use "text-align: center;"

Inside this div my text means to be in current form.

I hope I managed to explain better what they want to do.You can help me solve this problem?

Thanks in advance!

解决方案

This can be done by adding an extra span around the text:

• Add text-align: center; to p
• Add an extra span around the text
• Add a new span selector with display: inline-block; to make the span center in relation to the p and text-align: left; to shift it's text to the 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>

这篇关于如何对齐左侧中心的文字？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！