Search code examples
htmlcssalignment

Right-aligning a div under centered text

I have my main content div, and I want to create a title that is centered in this parent div, and then have a subtitle underneath that is right-aligned to the edge of the centered text. I've been having a real difficult time getting this to work, and all the examples I can find on this site and others seem to get messed up when the top text is centered (as opposed to, say, left-aligned to the parent div).

It should look like this (where App Title is centered in a larger div): enter image description here

The closest I can find is this question (Right-align two divs) but it seems that float: left is very important to making this work, which doesn't seem to work for my case. Other solutions seem to involve display: table but I was struggling to get the effect I want.

The title div needs to be variable width and I don't need to support ancient browsers. Thanks for any help!

Solution

  • Here are 2 ways, one using flex and the other using inline-block. Basically create a container for the titles, center that container, then align the subtitle to the right.

    * {margin:0;}
h1 {
  font-size: 3em;
}

.flex {
  display: flex;
  justify-content: center;
}
.flex h2 {
  text-align: right;
}

.ib {
  text-align: center;
}
.ib header {
  display: inline-block;
}
.ib h2 {
  text-align: right;
}
    <section class="flex">
  <header>
    <h1>app title</h1>
    <h2>subtitle</h2>
  </header>
</section>

<section class="ib">
  <header>
    <h1>app title</h1>
    <h2>subtitle</h2>
  </header>
</section>