vertically center a span/svg inside a div - HTML CSS SVG

HTML CSS examples for SVG:svg element

  1. HOME
  2. HTML CSS
  3. SVG
  4. svg element

Description

vertically center a span/svg 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">

body {<!--from   w  w  w  .ja v a 2 s .co m-->
   padding: 25px;
}
#dvMore
{
   display: inline-block;
   cursor: pointer;
   text-align: center;
   position: absolute;
   right: 10%;
   top: 10%;
   border-radius: 2px;
   font-size: 0.9em;
   background-color: #4285f4;
   color: #fff;
   transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   transition-delay: 0.2s;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
#dvMore:active {
   box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
   transition-delay: 0s;
}
#dvMore2
{
   display: inline-block;
   cursor: pointer;
   height: 50px;
   display: flex;
   align-items: center;
}
#dvMore2 > div{
   display: flex;
   align-items: center;
   justify-content: center;
}
#spMore
{
   vertical-align: top;
   margin: 0 5px 0 0;
   padding: 0 8px;
}


      </style> 
 </head> 
 <body> 
  <div id="dvMore"> 
   <div id="dvMore2"> 
    <div style="overflow: hidden;"> 
     <span id="spMore">View More</span> 
     <svg style="width:24px;height:24px" viewbox="0 0 24 24"> 
      <path fill="#000000" d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path> 
     </svg> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials