Question 286826 in Html Question posted in
Some basic documentation can be found here.

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

I want to center the h3 tag which reads "my favourite song ↓" to be right above the audio player and centered, not fully to the left and not right above the audio player. I know I can remove the br line to get it closer together, but I don’t want to simply use padding, I want to be sure it’s centered correctly.

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

4

Answers


  1. 0

    I add code below.

    <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>
    Login or Signup to reply.
  2. 0

    You can simply do that using 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>
    Login or Signup to reply.
  3. 0 
    .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>
    Login or Signup to reply.
  4. 0

    I would determine the width of the audio element (300px), create a container div surrounding the audio element and the H3 and then add text-align: center to the H3.

    (You can remove the space separating the H3 from the line above it by removing the margin from the H3.)

    You can see my edits below in the code snippet.

    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search