將div內的文本與底部中心對齊-有解無憂

假設我有以下檔案：

*, *::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>

問題是鍵名是重疊的，所以我想像這樣將它們隔開：

我希望鍵名顯示在白鍵的底部中心，鍵名顯示在黑鍵的頂部中心。

我怎樣才能做到這一點？

我看過：如何將 div 的內容對齊到底部

將文本與 div 底部對齊

但它沒有解決它，謝謝。

uj5u.com熱心網友回復：

將文本放在它自己的 div 中，在鍵內。這個內部 div 應該有另一個類名。然后你可以使用 flex 來實作你想要的。

<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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/494779.html

標籤：html css

上一篇：添加兩個變數后Python腳本中的Tar命令失敗

下一篇：如何顯示以最左側和最右側的內容為中心的容器