Why won't this heading center?

Question

I have a sidebar with the a title in it and I want to center the title in the middle of the sidebar in such a way that the first letter of each word in the title is aligned vertically.

#sidebar {
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  padding-top: 20px;
  background: linear-gradient(-90deg, #353f4d, #3f4957);
}

#title-div {
  position: absolute;
  top: 0;
  width: 100%;
  background-color: #2980b9;
}

.title-text {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  font-family: Raleway;
  color: #f2f1f1;
}

<body>
  <div id="sidebar">
    <div id="title-div">
      <h1 class="title-text">The<br>Title</h1>
    </div>
  </div>
  </body

CLICK HERE for the image

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

display: flex; justify-content: center for #title-div fixes the issue.

If you are new to flexbox I recommend this guide.

Snippet

#sidebar {
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  padding-top: 20px;
  background: linear-gradient(-90deg, #353f4d, #3f4957);
}

#title-div {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  width: 100%;
  background-color: #2980b9;
}

.title-text {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  font-family: Raleway;
  color: #f2f1f1;
}

<body>
  <div id="sidebar">
    <div id="title-div">
      <h1 class="title-text">The<br>Title</h1>
    </div>
  </div>
</body>

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 07 '18 at 15:39

Andrzej Ziółek

2,241
1
13
21

But the first letter of each word is not aligned. This is not a valid solution. – Ivan Ivic Jul 07 '18 at 15:57
@IvanIvic : I edited my answer, please let me know if it's OK for you. – Andrzej Ziółek Jul 07 '18 at 16:51

Why won't this heading center?

1 Answers1

Snippet