Align elements vertically inside a div - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Div Align

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Div Align

Description

Align elements vertically inside a div

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">
.welcomeArea {<!--  w w w  . j a v  a  2  s . c om-->
   margin-top:71px;
   max-height:99px;
   height:99px;
   background-color:Chartreuse;
}

.welcomeAreaContent {
   line-height:99px;
   color:yellow;
   margin-left:6%;
   margin-right:6%;
}

.welcomeAreaContent>span {
   display:inline-block;
}

.welcomeAreaContent .welcomeName {
   font-weight:bold;
   font-size:2.8em;
   display:flex;
   align-items:center;
}

.verticalLine {
   border-left:solid blue;
   content:"";
}

.circle {
   width:51px;
   height:51px;
   border-radius:51%;
   behavior:url('http://www.java2s.com/style/demo/Google-Chrome.png');
   -moz-border-radius:51px;
   -webkit-border-radius:51px;
   border-radius:51px;
   margin-left:33px;
   display:inline-block;
}

.twittericon {
   background:url('http://www.java2s.com/style/demo/Google-Chrome.png') no-repeat center;
   background-color:pink;
   background-size:cover;
}
</style> 
 </head> 
 <body> 
  <div class="welcomeArea"> 
   <div class="welcomeAreaContent"> 
    <div class="welcomeName">
      TEXT TEXT 
     <span class="circle twittericon"></span> 
    </div> 
    <div class="verticalLine"> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials