Placing text over any image at "compass" positions - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text Position

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Image Text Position

Description

Placing text over any image at "compass" positions

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">
.compass-wrap {<!--  w  w w . j a v a 2 s.c  o m-->
   position:relative;
   display:inline-block;
}

.compass-label {
   position:absolute;
   display:block;
   width:21px;
   height:21px;
   text-align:center;
   vertical-align:middle;
   line-height:21px;
}

.north-label {
   top:0;
   left:51%;
   margin-left:-11px;
}

.south-label {
   bottom:0;
   left:51%;
   margin-left:-11px;
}

.east-label {
   right:0;
   top:51%;
   margin-top:-11px;
}

.west-label {
   left:0;
   top:51%;
   margin-top:-11px;
}
</style> 
 </head> 
 <body> 
  <div class="compass-wrap"> 
   <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> 
   <span class="compass-label north-label">L</span> 
   <span class="compass-label south-label">L</span> 
   <span class="compass-label east-label">L</span> 
   <span class="compass-label west-label">L</span> 
  </div>  
 </body>
</html>

Related Tutorials