Why is my paragraph tag not centering in HTML?

Question

I have tried everything to get this <p> tag to center in a <div>. When I try text-align: center; nothing happens. I have tried to change the display type, but nothing changes. Thank you so much in advance.I simply have no idea what I am doing wrong.

This is my code:

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.w1-3 {
  width: 33.33%;
  width: calc(100% / 3);
  display: inline-block;
  height: 100%;
}

.background {
  height: 100%;
}

#left {
  background-color: #e74c3c;
}

#middle {
  background-color: #3498db;
}

#right {
  background-color: #2ecc71;
}

#questions {
  font-size: 50pt;
  color: white;
  text-align: center;
  display: inline;
}

.title {
  font-family: 'Montserrat', sans-serif;
}

.text {
  font-family: 'Open Sans', sans-serif;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans">
<div class="w1-3" id="left">
  <div class="background">
    <p class="title" id="questions">Hello</p>
  </div>
</div>
<div class="w1-3" id="middle">
  <div class="background">
    <p class="title" id="questions">Hello</p>
  </div>
</div>
<div class="w1-3" id="right">
  <div class="background">
    <p class="title" id="questions">Hello</p>
  </div>
</div>

You're giving your paragraphs `display: inline`. That's why they don't center their content. Paragraphs are (and should be) block elements. So, remove this property from your `#questions` selector and it should work. Also, you have 3 of those elements with the same `id` (*questions*). You shoudn't multiple items with the same ID. Please take a look at: https://stackoverflow.com/questions/84378/div-class-vs-id — Jordi Nebot, Dec 17 '17 at 18:02
I added text-align: center to .background https://jsbin.com/sacotit/edit?html — Bindrid, Dec 17 '17 at 18:07

VXp · Accepted Answer · 2017-12-17T18:35:35.823

This is because you set the display: inline for the #questions div which then takes only the contents width and therefore can't center it horizontally, so remove it or comment out to achieve the desired result, since the text-align: center is already set:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

.w1-3 {
    width: 33.33%;
    width: calc(100% / 3);
    display: inline-block;
    height: 100%;
}

.background {
 height: 100%;
}

#left {
 background-color: #e74c3c;
}

#middle {
 background-color: #3498db;
}

#right {
 background-color: #2ecc71;
}

#questions {
 font-size: 50pt;
 color: white;
 text-align: center;
 /*display: inline; the culprit */
}

.title {
 font-family: 'Montserrat', sans-serif;
}

.text {
 font-family: 'Open Sans', sans-serif;
}

<!DOCTYPE html>

<html>
<head>
 <link rel="stylesheet" type="text/css" href="css/styles.css">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans">
</head>
<body>
<div class="w1-3" id="left">
 <div class="background">
  <p class="title" id="questions">Hello</p>
 </div>
</div><div class="w1-3" id="middle">
 <div class="background">
  <p class="title" id="questions">Hello</p>
 </div>
</div><div class="w1-3" id="right">
 <div class="background">
  <p class="title" id="questions">Hello</p>
 </div>
</div>
</body>
</html>

Flexbox solution:

* {box-sizing:border-box} /* recommended */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.flex-container {
  display: flex; /* displays children inline by default */
}

.w1-3 {
  flex: 1; /* each 33.33% of the parents width */
  /*
  width: 33.33%;
  width: calc(100% / 3);
  display: inline-block;
  */
  height: 100vh; /* modified */
}

.background {
  /*height: 100%;*/
}

#left {
  background-color: #e74c3c;
}

#middle {
  background-color: #3498db;
}

#right {
  background-color: #2ecc71;
}

#questions {
  font-size: 50pt;
  color: white;
  text-align: center;
  /*display: inline; the culprit */
}

.title {
  font-family: 'Montserrat', sans-serif;
}

.text {
  font-family: 'Open Sans', sans-serif;
}

/* addition */
@media screen and (max-width: 600px) { /* adjust the breakpoint to your needs */
  .flex-container {
    flex-direction: column; /* stacks children vertically */
  }
}

<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans">

<div class="flex-container">
  <div class="w1-3" id="left">
    <div class="background">
      <p class="title" id="questions">Hello</p>
    </div>
  </div>
  <div class="w1-3" id="middle">
    <div class="background">
      <p class="title" id="questions">Hello</p>
    </div>
  </div>
  <div class="w1-3" id="right">
    <div class="background">
      <p class="title" id="questions">Hello</p>
    </div>
  </div>
</div>

Also as pointed out by @Bindrid, you can center the content just by adding the text-align: center to their parent or the .background div, that way you can keep the display: inline you've set for the #questions div.

Why is my paragraph tag not centering in HTML?

1 Answers1