HTML CSS examples for CSS Widget:Image Text
Image to the left, text centered (in page)
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> article#main-col { float:left; width:66%; } .dark {<!--from ww w .j ava 2s . c om--> padding:16px; background:Chartreuse; color:yellow; margin-top:11px; margin-bottom:11px; height:251px; } .dark .imagediv { height:100%; float:left; display:flex; align-items:center; } .container { width:81%; margin:auto; overflow:hidden; } article#main-col { float:left; width:66%; } </style> </head> <body> <center> <section id="main"> <div class="container"> <article id="main-About-Col"> <h1 class="PTitle">Lorem ip</h1> <div class="dark"> <div class="imagediv"> <img style="float:left; vertical-align:center;" alt="Jack Picture" width="125px" src="https://www.java2s.com/style/demo/Firefox.png"> </div> <h2>Lorem </h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor neque, ornare vitae tempor hendrerit, luctus at neque. Phasellus sed quam pharetra, tincidunt tortor in, pharetra ni</p> </div> </article> </div> </section> </center> </body> </html>