CODEWITHSUNDEEP
csshtml
Jimale Abdi
Jimale Abdi

Reputation: 2864

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

 <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 The image

Upvotes: 1

Views: 18987

Answers (6)

Mohammad Khatibzadeh
Mohammad Khatibzadeh

Reputation: 49

you just need to change 'center' with 'left'. it will fix it.

.container {
text-align:left;
}
<p class='container'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra nibh cras pulvinar mattis nunc sed blandit. Pellentesque adipiscing commodo elit at imperdiet dui accumsan.
</p>

Upvotes: 0

saman
saman

Reputation: 11

p {
    position: absolute;
    left: 50%;
    -ms-transform: translate(-50%,0);
    transform: translate(-50%, 0);
}
<p>
        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>

Upvotes: 1

Sarah
Sarah

Reputation: 2003

If you put the paragraph inside a div (with a fixed width) and center the div on the page then you can use text-align to style the paragraph itself (inside the div). I think you want text-align: left; for the paragraph text itself. Here is the CSS for the div wrapper.

CSS

.text-wrapper{
width: 300px;
margin: 0px auto;
}

HTML

   <body>
      <div class="text-wrapper">
        <p style="text-align: left;">
        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>
      </div>
    </body>

Upvotes: 1

yinken
yinken

Reputation: 423

You could do something like this:

 <div style="margin:0 auto;width:50vw"><p style="text-align: left;">
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></div>

text-align: center-right is not a valid attribute. We can however wrap a div around your paragraph and move that into the center of the page with margin:0 auto. We also have to give this div a fixed width.

Upvotes: 0

wlh
wlh

Reputation: 3525

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>

Upvotes: 5

Itay Gal
Itay Gal

Reputation: 10824

This is the shortest way and it's simple. You set a fixed width and giving it auto margin so it will be centered.

.container {
  width: 300px;
  margin: 0 auto;
}
<div class="container">
  <p>
    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>
</div>

If you layout is more complex you might want to use flex. For example:

.container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content{
  flex-basis: 300px;
  flex-grow: 0;
  flex-shrink: 0;
}
<div class="container">
  <div class="content">
    <p>
      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>
  </div>
</div>

Upvotes: 3

Related Questions