CODEWITHSUNDEEP
csswordpressalignment
Szabolcs
Szabolcs

Reputation: 25703

How can I align two different-size pieces of text to the left and right while matching baselines?

I am trying to change how the title and tagline are displayed in the Coraline WordPress theme. I want them next to each other, aligned on their baseline, justified left and right. I'm new to CSS.

I managed to figure out a solution, but it doesn't seem to work in Safari 8. What is a robust alternative that works in recent versions of all major browsers?

This is my attempt that works in Chrome and Firefox:

#container {
  width: 400px;
  background: #eee;
  /* This below is the key, doesn't work in Safari 8 */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

#title {
  font-size: 32pt;
  background: #aee;
}

#tagline {
  font-size: 12pt;
  background: #eea;
}
<div id="container">
  <div id="title">Site Title</div>
  <div id="tagline">This is the tagline</div>
</div>

Upvotes: 1

Views: 100

Answers (1)

Stickers
Stickers

Reputation: 78706

Safari currently only supports flex with prefix.

#container {
  display: -webkit-flex; /*new*/
  display: flex;
  -webkit-justify-content: space-between; /*new*/
  justify-content: space-between;
  -webkit-align-items: baseline; /*new*/
  align-items: baseline;
}

Updated demo:

#container {
  width: 400px;
  background: #eee;
  /* This below is the key, doesn't work in Safari 8
     Edit, added -webkit-* prefix */
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: baseline;
  align-items: baseline;
}

#title {
  font-size: 32pt;
  background: #aee;
}

#tagline {
  font-size: 12pt;
  background: #eea;
}
<div id="container">
  <div id="title">Site Title</div>
  <div id="tagline">This is the tagline</div>
</div>

Alternatively, you could use inline-block with some tricks as follows.

#container {
  width: 400px;
  background: #eee;
  text-align: justify;
  font-size: 0; /*fix for white space*/
}

#container:after{
  content: "";
  width: 100%;
  display: inline-block;
}

#title, #tagline {
  display: inline-block;
  vertical-align: bottom;
}

#title {
  font-size: 32pt;
  background: #aee;
}

#tagline {
  font-size: 12pt;
  background: #eea;
}
<div id="container">
  <div id="title">Site Title</div>
  <div id="tagline">This is the tagline</div>
</div>

Upvotes: 1

Related Questions