Cannot center a paragraph with specified width

Question

I gave a paragraph a width property because I want it collapsed and not too stretched out horizontally. After I did that, I wanted to align that text to the center, but all it does when I add text-align: center; is making the direction of paragraph centered.

I need the text itself to be in the center. I tried adding text-align: center; to the <div> or p. Nothing pays off.

Maybe it does not need a specific width? Need help.

.content {
  margin: 3cm auto;
  text-align: center;
}

.content p {
  line-height: normal;
  font-size: 16px;
}

#text {
  width: 500px;
}

<div class="content">
  <div id="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rutrum ex quis hendrerit sagittis. Proin fringilla id sapien suscipit hendrerit. Integer sed diam nec turpis fringilla facilisis id non nulla.</p>
  </div>
</div>

Duplicate - https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div?rq=1 — Paulie_D, Jun 12 '18 at 14:35

score 1 · Answer 1 · answered Jun 12 '18 at 14:01

Change the left and right margins to auto.

.content {
  margin: 3cm auto 3cm;
  width: 300px;
  text-align: center;
}

<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare odio arcu, id dictum turpis fermentum eu. Nunc congue dolor at est auctor, ut mollis tellus consectetur. Suspendisse ullamcorper, justo ac rutrum maximus, dui ipsum laoreet est,
    id malesuada purus dolor sed augue.</p>
</div>

score 1 · Answer 2 · answered Jun 12 '18 at 14:02

What I think you are saying is that you want to center the entire paragraph. Try setting the margin to auto like so.

.content {
  margin: 3cm auto;
  width: 300px;
}

<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare odio arcu, id dictum turpis fermentum eu. Nunc congue dolor at est auctor, ut mollis tellus consectetur. Suspendisse ullamcorper, justo ac rutrum maximus, dui ipsum laoreet est,
    id malesuada purus dolor sed augue.</p>
</div>

score 1 · Answer 3 · answered Jun 12 '18 at 16:17

1

You can just add to your styles

#text {
  margin: 0 auto;
}

answered Jun 12 '18 at 16:17

loki

187
2
14

Cannot center a paragraph with specified width

3 Answers3