Clever Geek Handbook

How to align text in the center to the left position?

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>
Run codeHide result


I want my text in its current form to be centered.

I don't want to use "text-align: center;"

Inside this div, my text means to be on the current form.

I hope I was able to better explain what they want to do. Can you help me solve this problem?

Thanks in advance!

0


source to share


2 answers


This can be done by adding additional text span

around the text:

  • Add text-align: center;

    top

  • Add extra text span

    around the text
  • Add a new selector span

    with display: inline-block;

    to center span

    in relation to p

    and text-align: left;

    to move its 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>
Run codeHide result


+3


source


You can also try this,

Add tag <span>

for content and add this css



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

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

0


source






More articles:


All Articles