Centering button using flex box with text aligned to bottom with 100% width - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Center

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex Center

Description

Centering button using flex box with text aligned to bottom with 100% width

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
.captioned-video {<!--   w  w  w  .  java  2s.  c o  m-->
   border:2px solid Chartreuse;
   padding:21px;
   display:flex;
   flex-direction:column;
}

.captioned-video .video-container {
   overflow:hidden;
   display:flex;
   justify-content:center;
   align-items:center;
   flex-direction:column;
   position:relative;
}

.captioned-video .video-container img {
   flex:none;
}

.captioned-video .video-container iframe {
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
}

.captioned-video .video-container .play {
   width:100px;
   height:100px;
   border-radius:100%;
   border:none;
   background-color:yellow;
   position:absolute;
   top:51%;
   left:51%;
   transform:translate(-51%, -51%);
   padding:0;
}

.captioned-video .video-container .play:hover {
   transition:all ease 0.6s;
   background-color:blue;
}

.captioned-video .video-container .play:after {
   content:"";
   position:relative;
   display:inline-block;
   border-style:solid;
   border-width:21px 0 21px 31px;
   border-color:pink;
   top:3px;
   left:6px;
}

.captioned-video .caption .caption__subhead {
   color:WhiteSmoke;
   font-family:Arial;
   font-size:15px;
}

.captioned-video .caption p {
   font-size:13px;
   font-style:Arial;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="captioned-video"> 
   <div class="video-container" data-module-dynamic="embed-video"> 
    <img src="https://www.java2s.com/style/demo/Firefox.png"> 
    <button class="play" data-video="video url here"></button> 
   </div> 
   <div class="caption"> 
    <h3 class="caption__subhead">Caption Headline</h3> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials