CODEWITHSUNDEEP
htmlcss
Adrian
Adrian

Reputation: 273

Vertical align left and right text inside a div

I am trying to create a headline and align one text to the left and another to the right and I would like to know if there is another way apart from line-height to achieve that?

.popular {
  margin-left: 15px;
  float: left;
}
.popular-day {
  margin-right: 15px;
  float: right
}
.menu-headline {
  height: 100px;
  outline: 1px solid black;  
  width: 500px;
  text-align: middle;
}
<div class='menu-headline'>
  <p class='popular'>Popular</p>
  <p class='popular-day'>Today</p>
</div>

Upvotes: 1

Views: 67

Answers (1)

Stickers
Stickers

Reputation: 78676

It can be done easily with flexbox.

.menu-headline {
  outline: 1px solid black; 
  width: 500px;
  height: 100px;
  padding: 0 15px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
<div class='menu-headline'>
  <p class='popular'>Popular</p>
  <p class='popular-day'>Today</p>
</div>

Or using CSS table to support older IE.

.menu-headline {
  outline: 1px solid black; 
  width: 500px;
  height: 100px;
  display: table;
}
.menu-headline > p {
  display: table-cell;
  vertical-align: middle;
  padding: 0 15px;
}
.popular-day {
  text-align: right;
}
<div class='menu-headline'>
  <p class='popular'>Popular</p>
  <p class='popular-day'>Today</p>
</div>

Upvotes: 2

Related Questions