align text inside div to bottom center

Question

Say I have the following files:

*, *::before, *::after {
    box-sizing: border-box;
}


body {
    background-color: #612718;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.piano {
    display: flex;
    margin: 0px auto;
}

.key {
    height: calc(var(--width) * 4);
    width: var(--width);
    text-align: center;
    color: black;
}

.white {
    bottom: 0;
    --width: 2.8vw;
    background-color: white;
    border: 1px solid #333;
}

.black {
    vertical-align: top;
    --width: 2vw;
    background-color: black;
    margin-left: calc(var(--width) / -2);
    margin-right: calc(var(--width) / -2);
    z-index: 2;
    color: white;
}

<body>
    <div id="wrapper">
        <div class="piano" id="piano">
            <div id="C2" class="key white">C2</div>
            <div id="C#2" class="key black">C#2</div>
            <div id="D2" class="key white">D2</div>
            <div id="D#2" class="key black">D#2</div>
            <div id="E2" class="key white">E2</div>
            <div id="F2" class="key white">F2</div>
            <div id="F#2" class="key black">F#2</div>
            <div id="G2" class="key white">G2</div>
            <div id="G#2" class="key black">G#2</div>
            <div id="A2" class="key white">A2</div>
            <div id="A#2" class="key black">A$2</div>
            <div id="B2" class="key white">B2</div>
            <div id="C3" class="key white">C3</div>
            <div id="C#3" class="key black">C#3</div>
            <div id="D3" class="key white">D3</div>
            <div id="D#3" class="key black">D#3</div>
            <div id="E3" class="key white">E3</div>
            <div id="F3" class="key white">F3</div>
            <div id="F#3" class="key black">F#3</div>
            <div id="G3" class="key white">G3</div>
            <div id="G#3" class="key black">G#3</div>
            <div id="A3" class="key white">A3</div>
            <div id="A#3" class="key black">A#3</div>
            <div id="B3" class="key white">B3</div>

            <div id="C4" class="key white">C4</div>
            <div id="C#4" class="key black">C#4</div>
            <div id="D4" class="key white">D4</div>
            <div id="D#4" class="key black">D#4</div>
            <div id="E4" class="key white">E4</div>
            <div id="F4" class="key white">F4</div>
            <div id="F#4" class="key black">F#4</div>
            <div id="G4" class="key white">G4</div>
            <div id="G#4" class="key black">G#4</div>
            <div id="A4" class="key white">A4</div>
            <div id="A#4" class="key black">A#4</div>
            <div id="B4" class="key white">B4</div>

            <div id="C5" class="key white">C5</div>
            <div id="C#5" class="key black">C#5</div>
            <div id="D5" class="key white">D5</div>
            <div id="D#5" class="key black">D#5</div>
            <div id="E5" class="key white">E5</div>
            <div id="F5" class="key white">F5</div>
            <div id="F#5" class="key black">F#5</div>
            <div id="G5" class="key white">G5</div>
            <div id="G#5" class="key black">G#5</div>
            <div id="A5" class="key white">A5</div>
            <div id="A#5" class="key black">A#5</div>
            <div id="B5" class="key white">B5</div>

            <div id="C6" class="key white">C6</div>
            <div id="C#6" class="key black">C#6</div>
            <div id="D6" class="key white">D6</div>
            <div id="D#6" class="key black">D#6</div>
            <div id="E6" class="key white">E6</div>
            <div id="F6" class="key white">F6</div>
            <div id="F#6" class="key black">F#6</div>
            <div id="G6" class="key white">G6</div>
            <div id="G#6" class="key black">G#6</div>
            <div id="A6" class="key white">A6</div>
            <div id="A#6" class="key black">A#6</div>
            <div id="B6" class="key white">B6</div>
        </div>
    </div>
</body>

The issue is that the key names are overlapping so I want to space them out like so:

I want the key name to show in the bottom center of the white keys and the key name to show in the top center of the black keys.

how can I acheive this?

I have looked at: How to align content of a div to the bottom

Align text to the bottom of a div

but it didn't fix it, thanks.

Does this answer your question? [How to align content of a div to the bottom](https://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom) — Domino, Jun 22 '22 at 20:09

score 0 · Accepted Answer · answered Jun 22 '22 at 20:10

Put the text in it's own div, within the key. This inner div should have another class name. Then you can use flex to achieve what you want.

<style>
  key {
    display: flex;
  }
  .black.note-name {
    align-self: bottom;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  body {
    background-color: #612718;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .piano {
    display: flex;
    margin: 0px auto;
  }
  .key {
    height: calc(var(--width) * 4);
    width: var(--width);
    text-align: center;
    color: black;
    display: flex;
  }
  .white {
    bottom: 0;
    --width: 2.8vw;
    background-color: white;
    border: 1px solid #333;
  }
  .black {
    vertical-align: top;
    --width: 2vw;
    background-color: black;
    margin-left: calc(var(--width) / -2);
    margin-right: calc(var(--width) / -2);
    z-index: 2;
    color: white;
  }

  .black > .note-name {
    align-self: flex-end;
  }
</style>

<body>
  <div id="wrapper">
    <div class="piano" id="piano">
      <div id="C4" class="key white">
        <div class="note-name">C4</div>
      </div>
      <div id="C#4" class="key black">
        <div class="note-name">C#4</div>
      </div>
    </div>
  </div>
</body>

can you switch the alignment? I want the black key name to be at the top, and the white key name to be at the bottom — zero_to_hero, Jun 22 '22 at 20:30
alright, currently the text is not centered in the white keys, how can I solve it? after adding align-text: center; it still isn't aligned to center — zero_to_hero, Jun 22 '22 at 20:36

align text inside div to bottom center

1 Answers1