Making text inline within a div

Question

I am trying to make my h1 be inline within my box like this. Currently my H1 text is stacked on top of each other and looks like this. I want this to be inline rather than stacked on top of one and other, I have tried adding display: inline-block; and display: inline; to my H1 neither working. What do I need to add or remove from my H1 or box div to be able to achieve my H1 being inline!

HTML

<body>
  <div class="box">
    <h1>Centered Text</h1>
  </div>
</body>

CSS

*{
  margin: 0;
  padding: 0;
}
body{
  background-color: teal;
  font-family: sans-serif;
}
.box{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  width: 500px;
  height: 100px;
  background-color: red;
}
h1{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  font-size: 50px;
  font-weight: lighter;
  color: white;
}

Jfiddle

yes but like that rearranges my text so it is not centered in my div. I want my text to be inline will also maintaining being centered. — , Mar 19 '18 at 23:50
Not really sure what you mean answer has been found anyway, thanks for the help! — , Mar 19 '18 at 23:53
@Johannes since his need is to center, so the question is a perfect duplciate and he can find all what he need well commented and well explained there ... we will also find a better way than using absolute position as it's not the best way — Temani Afif, Mar 19 '18 at 23:54
`Not really sure what you mean answer` i simply mean that you are writing a complicated code for a an easy thing ... check above question and you will find better easier way — Temani Afif, Mar 19 '18 at 23:55
@TemaniAfif Still, the error is the missing `width` setting, which is not talked about in that answer — Johannes, Mar 19 '18 at 23:56
@Johannes ok you provided the solution of the width and i provided better lots of ways to center because the purpose is not only to fix issue but to also understand the need and try to provide better ways .. and i am sure your agree that we can do this easily without all this code — Temani Afif, Mar 20 '18 at 00:02
possible duplicate of https://stackoverflow.com/questions/6490252/vertically-centering-a-div-inside-another-div?noredirect=1&lq=1 — Temani Afif, Mar 20 '18 at 00:10
possible duplicate of https://stackoverflow.com/questions/5703552/css-center-text-horizontally-and-vertically-inside-a-div-block — Temani Afif, Mar 20 '18 at 00:11
possible duplocate of https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css/8865463#8865463 — Temani Afif, Mar 20 '18 at 00:11

Johannes · Accepted Answer · 2018-03-20T00:30:23.610

4

Your h1 has position: absolute, but no width setting. Just add width: 100%; to it to make it the width of its container so the texts fits into it in one line.

https://jsfiddle.net/80r16xgs/2/

edited Mar 20 '18 at 00:30

answered Mar 19 '18 at 23:50

Johannes

53,485
15
52
104

Beat me to it. :P – Edward Mar 19 '18 at 23:50
Thank you! Will mark correct when it allows me to :) – Mar 19 '18 at 23:52
if you insist it's not a duplicate, at least give a clear explanation of why we need width ;) – Temani Afif Mar 20 '18 at 00:09

score 0 · Answer 2 · answered Mar 19 '18 at 23:49

0

Just add white-space: nowrap; to h1, see this fiddle.

answered Mar 19 '18 at 23:49

Yogu

8,033
4
31
51

Drexpp · Answer 3 · 2018-03-19T23:55:14.480

-1

Try using position: relative in h1.

You can check the result

edited Mar 19 '18 at 23:55

answered Mar 19 '18 at 23:48

Drexpp

36
1
6

Making text inline within a div

3 Answers3