如何在音频播放器上方居中放置 h3 标签？-解网

问：

我想将写有“我最喜欢的歌曲↓”的 h3 标签居中，放在音频播放器的正上方并居中，而不是完全向左，而不是在音频播放器的正上方。我知道我可以删除 br 线以使其更靠近，但我不想简单地使用填充，我想确保它正确居中。

<hr>
<h3>my <u><i>favourite</i></u> song ↓</h3>
<br>
<audio controls>
    <source src="audio/xyz.mp3" type="audio/mpeg">
</audio>
<hr>

HTML CSS格式

0赞 j08691 11/17/2023

你尝试过什么CSS？

0赞 Aggressive Combo 11/17/2023

我试着问 ChatGPT，因为我不知道，它建议我把 h3 标签和音频播放器都放在一个 div 中，然后把它变成一个类，并在类中放置 display： flex;flex-direction：柱子;align-items：居中;text-align：居中;但它没有用。

0赞 GustavoAdolfo 11/17/2023

你试过CSS Flex Box吗？

0赞 Aggressive Combo 11/17/2023

我没有用过，没有。不过，我也不确定如何在代码中实现它。我几年前才做过html，还没有走得足够远，无法解决这些简单的问题。

答：

-1赞 Adrid 11/17/2023 #1

我在下面添加代码。

<div
  style="
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
  "
>
  <h3>
    my <u><i>favourite</i></u> song ↓
  </h3>
  <audio controls>
    <source src="audio/xyz.mp3" type="audio/mpeg" />
  </audio>
</div>

0赞 Aggressive Combo 11/17/2023

这部分有效，但我想将音频播放器保持在与以前相同的位置。我只想将文本居中到按钮。

0赞 Adrid 11/17/2023

我改变了我的答案。

0赞 j08691 11/17/2023

请解释您的答案，而不是要求 OP 接受它

0赞 Aggressive Combo 11/17/2023

谢谢，它有效。你知道如何删除文本上方的（填充？），这样我就可以使整个容器更接近上面的水平线吗？

1赞 Aggressive Combo 11/17/2023

J08691是对的。我知道这有效，但所有这些 CSS 属性都有点令人困惑，尤其是因为它们太多了。这些是如何结合在一起的？

-1赞 Morgan Mastrangelo 11/17/2023 #2

你可以简单地使用CSS来做到这一点。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  </style>
</head>

<body>
  <div class="container">
    <hr>
    <h3>my <u><i>favourite</i></u> song ↓</h3>
    <br>
    <audio controls>
      <source src="audio/xyz.mp3" type="audio/mpeg">
    </audio>
    <hr>
  </div>
</body>

</html>

1赞 j08691 11/17/2023

简单来说很棒，但请解释你的答案。flexbox 在这里是如何工作的？

0赞 Morgan Mastrangelo 11/17/2023

Flexbox 对齐元素进行对齐。align-items 属性在设置 flex-direction： column 时对齐垂直对齐但水平对齐;

-1赞 GustavoAdolfo 11/17/2023 #3

使用 Flexbox 并将元素分组到分层 div 中，您可以保持对象在空间中的组织。这个链接对 flexbox 有很好的解释。

.content {
    display: flex;
    flex-direction: column;
    padding: 6px;
    background-color: #2ac93f;
}

.content-header {
    background-color: #9ac93f;
    padding: 2px;
    display: flex;
    justify-content: center;
}

.content-body {
    display: flex;
    padding: 2px;
    background-color: #ddd;
    justify-content: center;
}

<div class="content">

    <div class="content-header">
        <h3>my <u><i>favourite</i></u> song ↓</h3>
    </div>

    <div class="content-body">
        <audio controls>
            <source src="audio/xyz.mp3" type="audio/mpeg">
        </audio>
    </div>
    
</div>

2赞 j08691 11/17/2023

请不要在没有任何解释的情况下转储代码作为您的答案

-1赞 Nick Friesen 11/17/2023 #4

我将确定音频元素的宽度（300px），在音频元素和 H3 周围创建一个容器 div，然后添加到 H3 中。text-align: center

（您可以通过删除 H3 的边距来删除 H3 与其上方行之间的空间。

您可以在下面的代码片段中看到我的编辑。

.audio-container {
  width: 300px;
}

.audio-container h3 {
  text-align: center;
  margin: 0;
}

<hr>
<div class="audio-container">
  <h3>my <u><i>favourite</i></u> song ↓</h3>
  <br>
  <audio controls>
    <source
    src="audio/xyz.mp3" type="audio/mpeg">
</audio>
</div>
<hr>

0赞 disinfor 11/17/2023

您不需要使 h3 的宽度为 100%。它是一个块级元素，因此除非您使用 CSS 更改属性，否则它将始终是其父容器的 100%。display

1赞 Nick Friesen 11/17/2023

感谢您的提醒！我从我的答案中删除了这个

上一个：Nodejs 使用动态路由提供 CSS * [已关闭]

下一个：在Java Spring中创建控制器时出现问题，teamplete css中出现错误 - 意外错误[已关闭]

如何在音频播放器上方居中放置 h3 标签？

How do I center an h3 tag above the audio player?

评论

评论

评论

评论

评论