Issue
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.
Solution
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>
Answered By - Dave Cook
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.