I'd like to vertically center the alarm name with the audio controls below:
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**   <audio controls="true" id="Alarm_03.mp3"></audio>
<br><br>
- **Alarm_05.mp3**   <audio controls="true" id="Alarm_05.mp3"></audio>
<br><br>
- **Alarm_12.mp3**   <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 or something like that I guess. But, What is the easiest way considering there is already an ID?
CodePudding user response:
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**   <audio controls="true" id="Alarm_03.mp3"></audio>
<br><br>
- **Alarm_05.mp3**   <audio controls="true" id="Alarm_05.mp3"></audio>
<br><br>
- **Alarm_12.mp3**   <audio controls="true" id="Alarm_12.mp3"></audio>
CodePudding user response:
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 >
- **Alarm_03.mp3**   
<audio controls="true" id="Alarm_03.mp3"></audio>
</div>
<div >
- **Alarm_05.mp3**   
<audio controls="true" id="Alarm_05.mp3"></audio>
</div>
<div >
- **Alarm_12.mp3**   
<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  
and add justify-content: space-around
to your class.
CodePudding user response:
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;
}