-1

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?

jameslcdmat
  • 1
  • Why do you have margin left applied? – Paulie_D Mar 08 '22 at 12:45
  • Also `text-align` is not inherited – Paulie_D Mar 08 '22 at 12:46
  • `text-align` is not the right property for this to begin with - it applies to text content and _inline_ elements; div is a block element. – CBroe Mar 08 '22 at 12:50
  • Centering stuff using CSS in all possible & impossible scenarios, is a topic that has been more than discussed to death already. Please do a bit of basic research, before you come asking here! Something trivial like "center div in html css" typed into Google, could have lead you to https://stackoverflow.com/questions/114543/how-to-horizontally-center-an-element in no time. – CBroe Mar 08 '22 at 12:51
  • @CBroe Thanks for the reply, but I have spent about 30 minutes looking and all they talk about is `text-align: center;`. Also, thanks for pointing that out, but what should I use instead. – jameslcdmat Mar 08 '22 at 16:03
  • @Paulie_D With / without it in my code it makes no difference to alignment. It was a small mistake in the code I've removed since. – jameslcdmat Mar 08 '22 at 16:04

1 Answers1

0

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;
}
Antonio Milicic
  • 31
  • 3
  • Thank you for the reply. Contents parent is `body`, and here is my css for it: width: 100%; height: 100vh; display: flex; background-color: #eee; – jameslcdmat Mar 08 '22 at 15:59
  • If you could send a screenshot of the DOM and how page looks it would help me understand the issue at hand. – Antonio Milicic Mar 09 '22 at 13:39