在 HTML/Markdown 段落中垂直对齐元素的最简单方法

Question

我想将闹钟名称与下面的音频控件垂直居中：

当前代码

代码是混合 Markdown 和 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>

很多复杂的现有解决方案

实现目标有很多复杂的方法：

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

我可以添加一个 <div> 和一个 class="centerAudioControl" 或我猜的类似的东西。但是，考虑到已经有 ID，最简单的方法是什么？

Answer 1

如果不添加 div 并使用 flexbox，我想不出任何解决方案。它还允许您删除 <br> 标签。

这是我会做的：

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

然后在您的样式表中：

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

根据您的具体情况，您也可以删除 &emsp; 并将 justify-content: space-around 添加到您的 class。

Answer 2

使用父级 div 包装所有这些并应用 flex 或 grid 之类的，如果你给包装 div 一个 id centralAudioControl

HTML

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

CSS

#centralAudioControl {
    width:100%;
    display:grid;
    align-content:center;
}

Answer 3

也许是这样的？？

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>

在 HTML/Markdown 段落中垂直对齐元素的最简单方法

Easiest way to vertically align elements in an HTML/Markdown paragrph

html

css

audio

markdown

我想将闹钟名称与下面的音频控件垂直居中：

当前代码

很多复杂的现有解决方案