0

I'd like to vertically center the alarm name with the audio controls below:

Tim-ta stock sound files.png

Current Code

The code is hybrid Markdown and HTML:


## Stock Sound Files

These are Tim-ta stock sound files you can use when a timer task ends:
<br>
- **Alarm_03.mp3** &emsp;&emsp;<audio controls="true" id="Alarm_03.mp3"></audio>
<br><br>
- **Alarm_05.mp3** &emsp;&emsp;<audio controls="true" id="Alarm_05.mp3"></audio>
<br><br>
- **Alarm_12.mp3** &emsp;&emsp;<audio controls="true" id="Alarm_12.mp3"></audio>

Lots of Complicated Existing Solutions

There are lots of complicated ways of achieving the goal:

I could add a <div> with a class="centerAudioControl" or something like that I guess. But, What is the easiest way considering there is already an ID?

WinEunuuchs2Unix
  • 1,801
  • 1
  • 17
  • 34
  • 1
    First thing that comes to mind make the `line-height` of the text equal to the `height` of the `audio`. Vertical centering will be automatic. – Rene van der Lende Apr 15 '22 at 03:13

3 Answers3

2

Maybe something like this??

audio {vertical-align:middle;}
## Stock Sound Files

These are Tim-ta stock sound files you can use when a timer task ends:
<br><br>

- **Alarm_03.mp3** &emsp;&emsp;<audio controls="true" id="Alarm_03.mp3"></audio>

<br><br>

- **Alarm_05.mp3** &emsp;&emsp;<audio controls="true" id="Alarm_05.mp3"></audio>

<br><br>

- **Alarm_12.mp3** &emsp;&emsp;<audio controls="true" id="Alarm_12.mp3"></audio>
Crystal
  • 1,845
  • 2
  • 4
  • 16
0

I can't think of any solution without adding a div and using flexbox. It would also allow you to remove the <br> tags.

Here is what I would do:

## Stock Sound Files

These are Tim-ta stock sound files you can use when a timer task ends:
<div class="centerAudioControl">
   - **Alarm_03.mp3** &emsp;&emsp;
   <audio controls="true" id="Alarm_03.mp3"></audio>
</div>
<div class="centerAudioControl">
  - **Alarm_05.mp3** &emsp;&emsp;
  <audio controls="true" id="Alarm_05.mp3"></audio>
</div>
<div class="centerAudioControl">
  - **Alarm_12.mp3** &emsp;&emsp;
  <audio controls="true" id="Alarm_12.mp3"></audio>
</div>

And then in your stylesheet:

.centerAudioControl {
  display: flex;
  align-items: center;
  /* Add margins as needed below */
}

Depening on your specific situation, you might also be able to remove the &emsp; and add justify-content: space-around to your class.

F. Rusconi
  • 115
  • 10
0

Use a parent div wrapping all these and apply flex or grid like, if you give the wrapping div an id of centralAudioControl

HTML

<div id="centralAudioControl"> 
  ....Your contents...
</div>

CSS

#centralAudioControl {
    width:100%;
    display:grid;
    align-content:center;
}
Dhaivath Lal
  • 42
  • 7