Centering an icon on top of an element's border - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Border Style

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Border Style

Description

Centering an icon on top of an element's border

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">

.landing-section2 {<!--from  w  w w  .java  2  s  . c o m-->
   padding: 50px;
   background-color: #2c2c2c;
   text-align: center;
}
.landing-section2 .col-sm-4 > div {
   border: 1px solid #357ca3;
   padding: 20px;
   position: relative;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}
.landing-section2 h3 {
   color: white;
   margin-top: 30px;
}
.landing-section2 p {
   color: #ccc;
}
.landing-section2 .landing-icon {
   color: #357ca3;
   font-size: 3em;
   z-index: 1000;
   position: absolute;
   top: -28px;
   left: 0;
   width: 100%;
   text-align: center;
}
.landing-icon span {
   display: inline-block;
   padding: 8px;
   background: #2c2c2c;
}


      </style> 
 </head> 
 <body> 
  <div class="landing-section2"> 
   <div class="container"> 
    <div class="row"> 
     <div class="col-sm-4 landing-section2-pillar"> 
      <div> 
       <div class="landing-icon"> 
        <span>@</span> 
       </div> 
       <h3> Section 1 </h3> 
       <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nunc nulla, fringilla et auctor et, congue sit amet nibh. Aenean vel est ante. Suspendisse quis tortor laoreet ligula vehicula commodo. Morbi suscipit, neque id vulputate mollis, orci sapien aliquam sem, ac laoreet ex nisi id leo. </p> 
      </div> 
     </div> 
     <div class="col-sm-4 landing-section2-pillar"> 
      <div> 
       <div class="landing-icon"> 
        <span>@</span> 
       </div> 
       <h3> Section 2 </h3> 
       <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nunc nulla, fringilla et auctor et, congue sit amet nibh. Aenean vel est ante. Suspendisse quis tortor laoreet ligula vehicula commodo. Morbi suscipit, neque id vulputate mollis, orci sapien aliquam sem, ac laoreet ex nisi id leo. </p> 
      </div> 
     </div> 
     <div class="col-sm-4 landing-section2-pillar"> 
      <div> 
       <div class="landing-icon"> 
        <span>@</span> 
       </div> 
       <h3> Section 3 </h3> 
       <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nunc nulla, fringilla et auctor et, congue sit amet nibh. Aenean vel est ante. Suspendisse quis tortor laoreet ligula vehicula commodo. Morbi suscipit, neque id vulputate mollis, orci sapien aliquam sem, ac laoreet ex nisi id leo. </p> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials