HTML CSS examples for CSS Widget:Image Text
Get my text to be centered on the same line as my image
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #title {<!--from w ww . java 2 s. c o m--> font-family:sans-serif; text-align:center; color:Chartreuse; display:inline; align-content:right; } body { align-content:center; vertical-align:top; margin:0; width:100%; height:100%; } #navbar { font-family:monospace; font-size:26px; text-align:center } #mainpara { text-align:left; max-width:301px; max-height:751px; font-size:21px; vertical-align:middle; font-family:sans-serif } img { max-width:100px } header { display:flex; align-items:center; } </style> </head> <body> <header> <img src="https://www.java2s.com/style/demo/Opera.png"> <h1 id="title">Lorem ipsum dolor sit am</h1> </header> <h3 id="navbar">Lorem ipsum dolor sit amet, conse</h3> <p id="mainpara">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 se</p> </body> </html>