Как выровнять текст в центре в левом положении?

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 вокруг текста
• Добавить новый селектор span с display: inline-block; сделать 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>

Answer 2

Вы также можете попробовать это,

Добавить <span> тег для содержания и добавить CSS

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

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