Html paragraph how to align text at the center and start all the text lines at the same place or position?

Issue

 <p style="text-align: center;">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br> 
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p>

I was trying to write a paragraph in HTML,i need to align text at the center,the text is aligned but the problem is the text is not starting at same place or position. Please check the picture to understand me clearly, Thank You.

my Html

check this picture

Solution

If you are only able to style the <p> element, then do the following:

Add display: flex to convert the p into a flex container, and text-align: left to keep the text justified on the left.

Set the direction of the container to column so that it will keep the breaks, and then align-items: center.

align-items will align the elements on the cross-axis, which in this case is the horizontal axis.

 <p style="text-align: left; display:flex; flex-direction: column; align-items: center">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br> 
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p>

Answered By - wlh