Align image inside all divs to the left of text, align text to center and top - 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

Align image inside all divs to the left of text, align text to center and top

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  Vip</title> 
  <style>
.club<!--from  ww  w . j a v a 2 s.  com-->
 {
   text-align:left;
   padding:0px 36px;
   font-weight:bold;
   border-radius:11px;
   background-color:Chartreuse;
   min-height:301px;
}

.club img {
   float:left;
   clear:both;
}

.flex-example {
   background-color:yellow;
   display:flex;
   flex-flow:row nowrap;
   align-items:center;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="flex-example"> 
   <img style="width:300px;height:300px;" src="https://www.java2s.com/style/demo/Opera.png"> 
   <div> 
    <h3>blah blah </h3> 
    <p>blah blah</p> 
    <p> </p> 
   </div> 
  </div> 
  <div class="club"> 
   <img style="width:300px;height:300px;" src="https://www.java2s.com/style/demo/InternetExplorer.png"> 
   <h3>blah blah </h3> 
   <p>blah blah </p> 
   <p> </p> 
  </div>  
 </body>
</html>

Related Tutorials