Text inside div wont center

Question

Problem Statement : Center alignment not happening

Relevant code:

#tekst {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #EFEFEF;
  width: 100%;
  height: 30%;
}

#innhold {
  width: 100%;
  height: 30%;
  top: 18%;
  left: 0%;
  background-color: #7e7e7e;
  position: absolute;
  border-radius: 5px;
  z-index: 2;
}

<div id="innhold">
  <div id="tekst"> text </div>
</div>

any help would be appreciated.

Possible duplicate of [Center text in div?](https://stackoverflow.com/questions/6055412/center-text-in-div) — ArneHugo, Dec 05 '17 at 11:42

score 1 · Answer 1 · answered Dec 05 '17 at 11:36

1

You can use text-align:center; to center text.

#tekst {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #EFEFEF;
  width: 100%;
  height: 30%;
  text-align: center;
}

#innhold {
  width: 100%;
  height: 30%;
  top: 18%;
  left: 0%;
  background-color: #7e7e7e;
  position: absolute;
  border-radius: 5px;
  z-index: 2;
}

<div id="innhold">
  <div id="tekst"> text </div>
</div>

answered Dec 05 '17 at 11:36

Master Yoda

4,334
10
43
77

2

"`text-align: center` you must use" is how it read in my mind. – UncaughtTypeError Dec 05 '17 at 12:00
2

@UncaughtTypeError Moved to the city I have, blend in I must. – Master Yoda Dec 05 '17 at 12:19

score 1 · Answer 2 · answered Dec 05 '17 at 11:39

To fully center your text you can use flexbox:

#tekst {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #EFEFEF;
  height: 30%;
}

#innhold {
  width: 100%;
  height: 30%;
  top: 18%;
  left: 0%;
  background-color: #7e7e7e;
  position: absolute;
  border-radius: 5px;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="innhold">
  <div id="tekst"> text </div>
</div>

score -2 · Answer 3 · answered Dec 05 '17 at 11:37

You need to add the CSS property text-align:center;.

Hope this helps.

#tekst {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  text-align:center;
  color: #EFEFEF;
  width: 100%;
  height: 30%;
}

#innhold {
  width: 100%;
  height: 30%;
  top: 18%;
  left: 0%;
  background-color: #7e7e7e;
  position: absolute;
  border-radius: 5px;
  z-index: 2;
}

<div id="innhold">
  <div id="tekst"> text </div>
</div>

Text inside div wont center

3 Answers3