HTML CSS examples for CSS Widget:Image Text
center text next to image
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .public_profile {<!-- w w w . j av a2 s. c om--> float:left; width:100%; display:flex; align-items:center; justify-content:center; border:2px solid Chartreuse; } .public_profile .profile-container { border:2px solid yellow; } .public_profile .profile_image { border-radius:51%; float:left; width:121px; height:121px; display:flex; align-items:center; justify-content:center; margin-right:16px; overflow:hidden; } .public_profile .profile_image.business { background-color:blue; } .public_profile .profile_image img { width:100%; height:100%; } .public_profile h4 { font-family:'OpenSans-ExtraBold'; font-size:13px; color:pink; margin:0; } .public_profile h3 { font-family:'OpenSans-Light'; font-size:25px; color:OrangeRed; margin:0; } .public_profile h5 { font-family:'OpenSans-Regular'; font-size:13px; color:grey; margin:0; } .public_profile h5.registered { font-size:12px; color:BlueViolet; } hr.business_line { margin-top:0; margin-bottom:0; width:31px; display:inline-block; border-top:3px solid Chartreuse; } </style> </head> <body> <div class="public_profile"> <div class="profile_image business"> <img src="https://www.java2s.com/style/demo/Firefox.png"> </div> <div class="profile-container"> <h4>Lorem ipsum dolo</h4> <h3>Lorem ipsum dolor sit a</h3> <hr class="business_line"> <h5>Lorem ipsum d</h5> <h5 class="registered">Lorem ipsum dolor sit amet, con</h5> </div> </div> </body> </html>