CODEWITHSUNDEEP
htmlcss
KDX2
KDX2

Reputation: 1023

Position two words next to each other css

I've a quick question for you, I know it should be something simple... Here I have two headers (h1). Each of them contains 1 word and both must be placed next to each other, just like an ordinary phrase, the problems is that I can't center them. They both should be exactly like a title on top and on center of the document. I'm using them both because I'd like to later ' tween ' them with GSAP or something.

.title{
  display: inline;
  position: top center;
  }

#tr{
  position: left top;
  margin-top: 0.02%;
  color: lightgray;
  size:18px;
  }

#si{
  position: right top;
  margin-top: 0.02%;
  color: lightgray;
  size:18px;
  } 
   //that's on .css side

   //html
  <h1 id='tr' class="title"> Winter </h1><h1 id='si' class="title">Day</h1>

This position: top center; line doesn't affect the text in intended way. To illustrate you it looks something like this right now:

 |    Winter day       |                                    |                   |

*Those markers I've just placed '|' aren't included in the project, it's just for you to understand what is happening.

Upvotes: 2

Views: 6759

Answers (2)

Collin Alpert
Collin Alpert

Reputation: 505

This is my solution:

<style type="text/css">
.title{
display: inline;
position: top center;
}

#tr{
position: left top;
margin-top: 0.02%;
color: lightgray;
size:18px;
}

#si{
position: right top;
margin-top: 0.02%;
color: lightgray;
size:18px;
}
</style>

<div style="text-align:center">
  <h1 id='tr' class="title"> Winter </h1><h1 id='si' class="title">Day</h1>
</div>

Upvotes: 0

asdf
asdf

Reputation: 3067

The best way to do this would be to put them both inside a div, display them as inline-block and give the div the property of text-align: center

HTML

<div class='centered-images'>
    <h1 class='title'>Winter</h1>
    <h1 class='title'>Day</h1>
</div>

CSS

.centered-images {
    text-align: center;
}

.title {
    display: inline-block;
    size: 18px;
    color: lightgray;
}

Here's a jsfiddle to demonstrate.

Upvotes: 7

Related Questions