How to position text over an image in css

Answer 1

For a responsive design it is good to use a container having a relative layout and content (placed in container) having fixed layout as.

CSS Styles:

/*Centering element in a base container*/

.contianer-relative{ 
  position: relative;
 }

.content-center-text-absolute{ 
  position: absolute; 
  text-align: center;
  width: 100%;
  height: 0%;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 51;
}

HTML code:

    

        
 
        
ENGINEERING 
 MANUALS

    
    

        

        
CONTRACTOR 
 DIRECTORY

    
       

For IONIC Grid layout, evenly spaced grid elements and the classes used in above HTML, please refer - Grid: Evenly Spaced Columns. Hope it helps you out... :)