text-align: center; - Why isn't working on my div [duplicate]

Question

When I am trying to center this div in html:

    <div class="content">
        <h1 class="about-us-heading">About</h1>
    <br>
    <p class="about-us">About Text Here</p>
</div>

I am using the following code in my css file:

.content {
  margin-left: 30px;
  width: 800px;
  text-align: center;
}

Please could someone point out what I am doing wrong here?

Answer 1

Text is centered, only issue is you have width on content, meaning that content might not be centered by itself, and it seems like center is not working in general.

Please check if your "content" parent element is centered by itself.

Check example here:

https://jsfiddle.net/l4s33n/dt9cexLv/7/

<div class="some-wrapper">
  <div class="content">
    <h1 class="about-us-heading">About</h1>
      <br>
    <p class="about-us">About Text Here</p>
  </div>
</div>

// CSS
.some-wrapper {
  display: flex;
  justify-content: center;
  background-color: lightblue;
}

.content {
  width: 800px;
  text-align: center;
  background-color: red;
}