Center one element above another element which is responsive and scales depending on screen size - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Responsive Layout

Description

Center one element above another element which is responsive and scales depending on screen size

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsu</title> 
  <style>
div {<!--from   w ww . j  a  v a2  s  .  c om-->
   position:relative;
   display:table;
   text-align:center;
   margin:auto;
   width:81%;
   white-space:nowrap;
   overflow:hidden;
   border-spacing:0.26em;
   table-layout:fixed;
}

div:after {
   content:attr(data-text);
   display:table-footer-group;
   background:gray;
}

div img {
   width:51%;
   width:100%;
   vertical-align:top;
}

div #input-box {
   display:table-header-group;
   background:gray;
   margin-bottom:0.26em;
}

img:focus + img {
   position:absolute;
   left:0;
}

b {
   font-size:3em;
   color:Chartreuse;
   border:yellow solid;
   display:inline-block;
   background:yellow;
   padding:0 0.26em;
   box-shadow:inset 0 0 0 4px green
}
</style> 
 </head> 
 <body translate="no"> 
  <div data-text="my gallery"> 
   <img tabindex="0" src="https://www.java2s.com/style/demo/Safari.png"> 
   <img tabindex="0" src="https://www.java2s.com/style/demo/Safari.png"> 
   <img tabindex="0" src="https://www.java2s.com/style/demo/InternetExplorer.png"> 
   <img tabindex="0" src="https://www.java2s.com/style/demo/Google-Chrome.png"> 
   <img tabindex="0" src="https://www.java2s.com/style/demo/Safari.png"> 
   <img tabindex="0" src="https://www.java2s.com/style/demo/Opera.png"> 
   <img tabindex="0" src="https://www.java2s.com/style/demo/InternetExplorer.png"> 
   <img tabindex="0" src="https://www.java2s.com/style/demo/Google-Chrome.png"> 
   <img tabindex="0" src="https://www.java2s.com/style/demo/Safari.png"> 
   <div id="input-box"> 
    <form> 
     <p>Lorem ipsum dol<input> <b>Lorem ipsum dolor sit amet,</b> </p> 
     <p> <input type="submit"> </p> 
    </form> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials