display image and text in same line in mobile device using css - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text

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

Description

display image and text in same line in mobile device using css

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
.amazon-section<!--from  w  ww .ja v  a  2s.  c  om-->
 {
   text-align:center;
   background-color:Chartreuse;
   display:table;
   margin:0px auto 0px auto;
   padding:0px 39px 6px;
   border-radius:5px;
   webkit-box-shadow:2px 2px 23px 0px yellow;
   -moz-box-shadow:2px 2px 23px 0px blue;
   box-shadow:2px 2px 23px 0px pink;
   position:relative;
   top:21px;
   font-family:"Arcon-Regular";
   box-sizing:border-box;
}

.amazon {
   display:flex;
   justify-content:center;
   align-items:center;
}

.amazon-section img
 {
   width:100px;
   padding:11px;
}

.amazon-content h2
 {
   font-size:19px;
   color:OrangeRed;
   font-weight:601;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="amazon-section"> 
   <div class="amazon"> 
    <img src="https://www.java2s.com/style/demo/Opera.png"> 
    <div class="amazon-content"> 
     <h2 class="amazon-text">Lorem ipsum dolor sit ame<br>Lorem ipsum dolor </h2> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials