CODEWITHSUNDEEP
htmlcss
TinyTiger
TinyTiger

Reputation: 2043

How do I get my divs aligned next to each other?

How do I make the number "87" sit next to the words "total score"?

I want the number on the right and "total score" text on the left, but with "total score" written across two lines.

I've tried using various div structures, floats and display properties but can't get it working.

<div style="text-align: center; padding: 1em; margin: 1em; background-color: #eee; border-radius: 10px;"><strong>Total<br>Score</strong>
  <div><span id="count" style="font-size: 2em;">87</span></div>
</div>

<div style="text-align: center; padding: 1em; margin: 1em; background-color: #eee; border-radius: 10px;">
  Rank #1 out of 321
</div>

Upvotes: 0

Views: 53

Answers (3)

VXp
VXp

Reputation: 12058

You can do it with the Flexbox:

div {
  display: flex; /* displays flex-items (children) inline */
  justify-content: center; /* centers them horizontally */
  margin: 1em;
  padding: 1em;
  background: #eee;
  border-radius: 10px;
}

div > * {margin: 0 5px} /* adjust */

#count {font-size: 2em}
<div>
  <strong>Total<br>Score</strong>
  <span id="count">87</span>
</div>

<div>Rank #1 out of 321</div>

Upvotes: 2

Nayana Chandran
Nayana Chandran

Reputation: 1483

This will looks more good , please try this

<div style="text-align: center; padding: 1em; margin: 1em; background-color: #eee; border-radius: 10px;">
  <strong style="display: inline-block; vertical-align: middle;">Total Score : 
				<div style="display: inline-block; vertical-align: middle;><span id="count" style="font-size: 2em;">87</span></div>
			</strong>
</div>

<div style="text-align: center; padding: 1em; margin: 1em; background-color: #eee; border-radius: 10px;">
  Rank #1 out of 321
</div>

Upvotes: 0

Zuber
Zuber

Reputation: 3473

Change css of strong and div after that

<div style="text-align: center; padding: 1em; margin: 1em; background-color: #eee; border-radius: 10px;">

  <strong style="display: inline-block; vertical-align: middle;">Total<br>Score</strong>
  
  <div style="display: inline-block; vertical-align: middle;"><span id="count" style="font-size: 2em;">87</span></div>
</div>

<div style="text-align: center; padding: 1em; margin: 1em; background-color: #eee; border-radius: 10px;">
  Rank #1 out of 321
</div>

Upvotes: 1

Related Questions