Inline-block element position with vertical position in a line - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Position

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

Description

Inline-block element position with vertical position in a line

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>
body {<!--from   w  w w . j a  v  a2 s . co m-->
   padding:21px;
   font-size:17px;
   font-family:"helveticaneuecyr", Arial, sans-serif;
   line-height:21px;
}

.status {
   position:relative;
   display:flex;
   white-space:nowrap;
   border:2px solid Chartreuse;
   margin:0 0 21px;
}

.status:before {
   content:'';
   display:inline-block;
   vertical-align:middle;
   align-self:center;
   width:15px;
   height:15px;
   background-color:yellow;
   border-radius:51%;
}

.status_success:before {
   background-color:blue;
}

.status_missed:before {
   background-color:pink;
}

.status_busy:before {
   background-color:OrangeRed;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="status status_success">
    Lorem ips 
  </div> 
  <div class="status status_busy">
    Lorem 
  </div> 
  <div class="status status_missed">
    Lorem ip 
  </div>  
 </body>
</html>

Related Tutorials