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

How do I vertically center text with CSS? [duplicate]

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

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** &emsp;&emsp;
   <audio controls="true" id="Alarm_03.mp3"></audio>
</div>
<div >
  - **Alarm_05.mp3** &emsp;&emsp;
  <audio controls="true" id="Alarm_05.mp3"></audio>
</div>
<div >
  - **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.

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