How to center align a button and place it in front?

Admin 1
Viewed 66

I have a button that I want to place in front of my video and aligned at the center of it. So I tried using position-relative to bring it in front of the video and flex to align it to the vertical and horizontal center. However, it is not working. It has the correct z index now thanks to position-relative but it is not center aligned. How can I make it work and why is flex not working here? Thanks..

<div class="row">
  <div class="col-12">
    <div class="mx-auto w-90 h-90">
      <div id="videoWrapper" class="embed-responsive embed-responsive-16by9 darken">
        <video id="videoPlayer" src="https://www.youtube.com/watch?v=P-b4SUOfn_4" 
          allowfullscreen controls></video> 
        <button class="btn btn-primary btn-lg p-2">
        Watch video<i class="fa fa-caret-right" aria-hidden="true"></i></button>
      </div>   
    </div>
  </div>
</div>

And here is my css:

.btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; }
bootstrap-4 css html
4 Answers

You can use a pure bootstrap solution for this.

<div class="row">
  <div class="col-12">
    <div class="mx-auto w-90 h-90">
      <div class="row">
              <div id="videoWrapper" class="embed-responsive embed-responsive-16by9 darken">
        <video id="videoPlayer" src="https://www.youtube.com/watch?v=P-b4SUOfn_4" 
          allowfullscreen controls></video> 
      
      </div>
      </div>
  
      <div class="row">
          <button class="mx-auto btn btn-primary btn-lg p-2">
        Watch video<i class="fa fa-caret-right" aria-hidden="true"></i></button>
      </div>
    </div>
  </div>
</div>

Put the video and button in separate containers and align the items inside that container centrally. Since bootstrap also uses flexbox, you can then inspect the exact flex styles applied which lead to this layout.

https://codepen.io/fuzzysid/pen/ExyzjrB

user_104517870

I have not used that btn styles from your code snippet.

I just chaged your html into below code.

<div class="row">
  <div class="col-12">
    <div class="mx-auto w-90">
      <div id="videoWrapper" class="embed-responsive embed-responsive-16by9 darken" style="position: absolute">
        <video id="videoPlayer" src="https://www.youtube.com/watch?v=P-b4SUOfn_4" allowfullscreen controls></video>
      </div>
      <div class="w-100 h-100 text-center align-center">
        <button class="btn btn-primary btn-lg p-2" style="position: relative; margin-top: 25%">Watch video</button>
      </div>
    </div>
  </div>
</div>
user_106659840

You are almost there. Just added few bootstrap 4 classes position-relative for your video and button. Now add class d-flex to the button & use mx-auto to align it to centre

.embed-responsive-16by9::before {
    padding-top: 10px!important;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>
 <div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="">
        <div id="videoWrapper" class="embed-responsive embed-responsive-16by9 darken">
          <video class="position-relative" id="videoPlayer" src="https://www.youtube.com/watch?v=P-b4SUOfn_4" allowfullscreen controls></video>
          <button class="btn btn-primary btn-lg p-2 position-relative mx-auto d-flex">
        Watch video<i class="fa fa-caret-right" aria-hidden="true"></i></button>
        </div>
      </div>
    </div>
  </div>
  </div>
</body>

</html>

solution 2) If you are looking to align the button in center of the video, you can use the CSS transform property as below

.btn{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
    <!DOCTYPE html>
    <html lang="en">

    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    </head>

    <body>
     <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <div class="">
            <div id="videoWrapper" class="embed-responsive embed-responsive-16by9 darken">
              <video id="videoPlayer" src="https://www.youtube.com/watch?v=P-b4SUOfn_4" allowfullscreen controls></video>
              <button class="btn btn-primary btn-lg">
            Watch video<i class="fa fa-caret-right" aria-hidden="true"></i></button>
            </div>
          </div>
        </div>
      </div>
      </div>
    </body>

    </html>

user_93804800

use transform in css

.btn-watch {
  position: absolute;
  z-index: 2;
  left: 50%;
  /* pushes 50% from left */
  top: 50%;
  /* pushes 50% from top */
  transform: translate(-50%, -50%);
  /* to vertically and horizontally center */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-12">
    <div class="mx-auto w-90 h-90">
      <div id="videoWrapper" class="embed-responsive embed-responsive-16by9 darken">
        <video id="videoPlayer" src="https://www.youtube.com/watch?v=P-b4SUOfn_4" allowfullscreen controls></video>
        <button class="btn btn-primary btn-lg p-2 btn-watch">
        Watch video<i class="fa fa-caret-right" aria-hidden="true"></i></button>
      </div>
    </div>
  </div>
</div>

user_95949950
Related