Using flexbox for aligning image and text - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Align

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

Description

Using flexbox for aligning image and text

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Aligning flex items to the baseline</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 
  <style>
* {<!--  w  w w  .j a  v a 2  s  .  c o m-->
   box-sizing:border-box;
}

h2,
p {
   margin-bottom:11px;
}

h2 {
   font-weight:bold;
}

img {
   max-width:100%;
   margin-bottom:11px;
}

body {
   padding:41px 31px 21px;
   line-height:2.6;
}

.c-grid {
   display:flex;
   flex-wrap:wrap;
   align-items:baseline;
}

.c-grid__item {
   display:block;
   width:34.3334%;
   padding:0 11px;
   margin-bottom:21px;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="c-grid"> 
   <a href="#" class="c-grid__item"> 
    <div class="c-grid__picture"> 
     <img src="https://www.java2s.com/style/demo/Google-Chrome.png"> 
    </div> 
    <div class="c-grid__content"> 
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore ratione commodi corrupti itaque sed architecto!</p> 
    </div> </a> 
   <a href="#" class="c-grid__item"> 
    <div class="c-grid__picture"> 
     <img src="https://www.java2s.com/style/demo/Google-Chrome.png"> 
    </div> 
    <div class="c-grid__content"> 
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore ratione commodi corrupti itaque sed architecto! Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> 
    </div> </a> 
   <a href="#" class="c-grid__item"> 
    <div class="c-grid__picture"> 
     <img src="https://www.java2s.com/style/demo/Opera.png"> 
    </div> 
    <div class="c-grid__content"> 
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore ratione commodi corrupti itaque sed architecto! </p> 
    </div> </a> 
   <article class="c-grid__item"> 
    <div class="c-grid__picture"> 
     <img src="https://www.java2s.com/style/demo/Safari.png"> 
    </div> 
    <div class="c-grid__content"> 
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore ratione commodi corrupti itaque sed architecto!</p> 
    </div> 
   </article> 
   <article class="c-grid__item"> 
    <div class="c-grid__picture"> 
     <img src="https://www.java2s.com/style/demo/Safari.png"> 
    </div> 
    <div class="c-grid__content"> 
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore ratione commodi corrupti itaque sed architecto! Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> 
    </div> 
   </article> 
   <article class="c-grid__item"> 
    <div class="c-grid__picture"> 
     <img src="https://www.java2s.com/style/demo/Firefox.png"> 
    </div> 
    <div class="c-grid__content"> 
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore ratione commodi corrupti itaque sed architecto! </p> 
    </div> 
   </article> 
  </div>  
 </body>
</html>

Related Tutorials