左右對齊圖像使用的技術是浮動div元素。
float:left 左對齊
float:right右對齊
示例
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>圖像左右對齊</
title
>
<
meta
charset
=
"UTF-8"
>
<
style
type
=
"text/css"
>
body {
font-family: Georgia, "Times New Roman", serif; /* 字體樣式 */
color: #665544;} /* 字體顏色 */
img.align-left { /* 圖片左邊對齊 */
float: left; /* 懸浮 左邊 顯示 */
margin-right: 10px;} /* 右邊外邊距 10 像素 */
img.align-right { /* 圖片右邊對齊 */
float: right; /* 懸浮 右邊 顯示 */
margin-left: 10px;} /* 左邊外邊距 10 像素 */
img.medium { /* 圖像中間 */
width: 250px; /* 寬度250 像素 */
height: 250px;} /* 高度250像素 */
</
style
>
</
head
>
<
body
>
<
h1
>軟件開發，成就夢想</
h1
>
<
p
><
img
src
=
"https://www.0735it.net/images/kc/jspservlet.jpg"
alt
=
"Servlet/JSP課程"
class
=
"align-left medium"
/><
b
><
i
>Servlet</
i
>
</
b
> 用Java編寫的服務器端程序，可以交互式地瀏覽和修改數據，生成動態Web內容。是Java企業級應用技術第一站。</
p
> <!--網頁插入圖片格式:<img src="地址.png" alt="所要顯示的文字" class="CSS樣式"/>-->
<
p
><
img
src
=
"https://www.0735it.net/images/kc/h5.jpg"
alt
=
"HTML5 課程"
class
=
"align-right medium"
/>
<
b
><
i
>HTML5</
i
></
b
> 由萬維網聯盟（W3C）2014年10月完成標準制定，取代1999年所制定的HTML 4.01和XHTML 1.0標準。HTML5 已廣泛應用於各行各業。</
p
>
</
body
>
</
html
>