HTML CSS examples for CSS Widget:Image Text Alignment
Vertically Align the text and Image in a DIV box
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> DIV.box {<!--from w w w . jav a2s.c o m--> HEIGHT:151px; WIDTH:41%; FLOAT:right; MARGIN:0px 2% 2% 0px } .topbox { HEIGHT:151px; WIDTH:82%; FLOAT:right; MARGIN:0px 2% 2% 0px } .sidebar { float:right; display:block; width:11%; height:601px; } </style> </head> <body> <p> <span style="font-size: 10pt; font-family: verdana, sans-serif">Lorem ipsum</span> </p> <p> <span style="font-size: 10pt; font-family: verdana, sans-serif"></span> </p> <div class="sidebar" style="background-color: #f00"> <center> <h3 style="color: #0066CC">Lorem i</h3> </center> </div> <div class="topbox" style="background-color: #EBEBEB"> <center> <h3 style="color: #0066CC">Lorem i</h3> </center> </div> <div class="box" style="background-color: #EBEBEB"> <center> <h3 style="color: #0066CC">Lorem ipsum dolor </h3> </center> </div> <div class="box" style="background-color: #EBEBEB"> <center> <h3 style="color: #0066CC">Lorem ipsum dolor</h3> </center> </div> <div class="box" style="background-color: #EBEBEB"> <center> <h3 style="color: #0066CC">Lorem ipsum </h3> </center> </div> <div class="box" style="background-color: #EBEBEB"> <center> <h3 style="color: #0066CC">Lorem ipsum dolor sit ame</h3> </center> </div> <div class="box" style="background-color: #EBEBEB"> <center> <h3 style="color: #0066CC">Lorem ipsum dolor </h3> </center> </div> <div class="box" style="background-color: #EBEBEB"> <center> <h3 style="color: #0066CC">Lorem ipsum dolor</h3> </center> </div> </body> </html>