Next »
60/920
« Previous

Use align attribute to align image to paragraph in HTML and CSS

Description

The following code shows how to use align attribute to align image to paragraph.

Example


<html>
<body>
<h1>No Align</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut risus tellus, hendrerit id, sagittis sed, lobortis eget, augue. <br />
<img src="http://java2s.com/style/download.png" alt="Red Hat Linux Programming Book Cover" width="50" height="66" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a metus et sem tempus mollis. Phasellus vel ante non ligula posuere ultrices ut ac metus. Cras quam odio, bibendum ac dignissim pulvinar, sodales eget justo. Ut eget neque est, in tempor tellus. Fusce ut risus nulla. Pellentesque tempus metus sit amet magna tempor condimentum. Quisque dapibus facilisis gravida. Suspendisse vehicula mauris id nulla convallis congue. Nulla tempor venenatis congue. Nullam nulla nisl, sollicitudin sed eleifend a, tempus vitae eros.  <br />
<h1>Align Left</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut risus tellus, hendrerit id, sagittis sed, lobortis eget, augue. <br />
<img src="http://java2s.com/style/download.png" alt="Red Hat Linux Programming Book Cover" width="50" height="66" align="left" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a metus et sem tempus mollis. Phasellus vel ante non ligula posuere ultrices ut ac metus. Cras quam odio, bibendum ac dignissim pulvinar, sodales eget justo. Ut eget neque est, in tempor tellus. Fusce ut risus nulla. Pellentesque tempus metus sit amet magna tempor condimentum. Quisque dapibus facilisis gravida. Suspendisse vehicula mauris id nulla convallis congue. Nulla tempor venenatis congue. Nullam nulla nisl, sollicitudin sed eleifend a, tempus vitae eros.  <br />
</p><!--  www  .  j  a  va 2  s  . c  om-->
<h1>Align Right</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut risus tellus, hendrerit id, sagittis sed, lobortis eget, augue. <br />
<img src="http://java2s.com/style/download.png" alt="Red Hat Linux Programming Book Cover" width="50" height="66" align="right" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a metus et sem tempus mollis. Phasellus vel ante non ligula posuere ultrices ut ac metus. Cras quam odio, bibendum ac dignissim pulvinar, sodales eget justo. Ut eget neque est, in tempor tellus. Fusce ut risus nulla. Pellentesque tempus metus sit amet magna tempor condimentum. Quisque dapibus facilisis gravida. Suspendisse vehicula mauris id nulla convallis congue. Nulla tempor venenatis congue. Nullam nulla nisl, sollicitudin sed eleifend a, tempus vitae eros.  <br />
</p>
</body>
</html>

Click to view the demo

The code above generates the following result.

Use align attribute to align image to paragraph in HTML and CSS
Next »
« Previous