Center text on top of fluidly changing image within flexbox - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Center

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

Description

Center text on top of fluidly changing image within flexbox

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.container {<!-- w  w w .  j ava  2 s.c om-->
   display: -webkit-flex;
   display: flex;
   align-items: center;
   justify-content: center;
   max-width: 100%;
   height: auto;
   flex-wrap: wrap;
}
.container .circle.box {
   width: 33.3333%;
   width: calc(100% / 3);
   height: auto;
   position: relative;          
}
.circle.box img {
   width: 100%;
   max-width: 66px;
}
.circle.box .text {
   font-size: 30px;
   text-align: center;
   position: absolute;
   top: 50%;
   left: 0;
   transform: translate(0, -50%);
   width: 100%;
   max-width: 66px;
}


      </style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="circle box"> 
    <img src="https://www.java2s.com/style/demo/Opera.png"> 
    <div class="circle text">
      70 
    </div> 
   </div> 
   <div class="circle box"> 
    <img src="https://www.java2s.com/style/demo/Google-Chrome.png"> 
    <div class="circle text">
      70 
    </div> 
   </div> 
   <div class="circle box"> 
    <img src="https://www.java2s.com/style/demo/Opera.png"> 
    <div class="circle text">
      70 
    </div> 
   </div> 
   <div class="circle box"> 
    <img src="https://www.java2s.com/style/demo/Firefox.png"> 
    <div class="circle text">
      70 
    </div> 
   </div> 
   <div class="circle box"> 
    <img src="https://www.java2s.com/style/demo/Safari.png"> 
    <div class="circle text">
      70 
    </div> 
   </div> 
   <div class="circle box"> 
    <img src="https://www.java2s.com/style/demo/Firefox.png"> 
    <div class="circle text">
      70 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials