HTML CSS aligning divs and text next to image - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text Alignment

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Image Text Alignment

Description

HTML CSS aligning divs and text next to image

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum </title> 
  <style>
.main {<!--from  ww  w  .  j a va  2 s .  co  m-->
   display:flex;
   align-items:center;
   justify-content:space-between;
}

.newspic {
   flex:2;
}

.newspic img {
   width:100%;
}

.sample {
   max-width:100%;
}
</style> 
 </head> 
 <body translate="no"> 
  <section class="main"> 
   <div class="newspic"> 
    <img src="https://www.java2s.com/style/demo/Firefox.png" alt="Photo placeholder"> 
   </div> 
   <div class="newstitle">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi u 
   </div> 
  </section> 
  <img class="sample" src="https://www.java2s.com/style/demo/Opera.png" alt="">  
 </body>
</html>

Related Tutorials