- 相關(guān)推薦
CSS入門(mén)知識-圖片水平對齊技巧
在CSS中，圖片怎么水平對齊，有哪些技巧呢？我們一起來(lái)學(xué)習一下吧！
一、圖片水平對齊text-align
在“文本水平對齊text-align”這一節我們詳細講解了text-align屬性。大家請記住，text-align一般只用在兩個(gè)地方：文本水平對齊和圖片水平對齊。也就是說(shuō)，text-align只對文本和img標簽有效，對其他標簽無(wú)效。
語(yǔ)法：
text-align:屬性值;
說(shuō)明：
text-align屬性取值如下表：
表1 text-align屬性
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>圖片水平對齊</title>
<style type="text/css">
p
{
width:300px;
height:80px;
border:1px solid gray;
}
.p_img1{text-align:left;}
.p_img2{text-align:center;}
.p_img3{text-align:right;}
img{width:60px;height:60px;}
</style>
</head>
<body>
<p class="p_img1">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</p>
<p class="p_img2">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</p>
<p class="p_img3">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</p>
</body>
</html>
在瀏覽器預覽效果如下：
分析：
很多人都以為設置圖片水平對齊是在img標簽設置，其實(shí)這是錯誤的。大家記住，圖片是要在父元素中進(jìn)行水平對齊的。在這個(gè)例子中，img元素的父元素是p，img元素是相對于p元素進(jìn)行水平對齊的。因此要想對圖片進(jìn)行水平對齊，就要在父元素（p元素）中設置text-align屬性。
【CSS入門(mén)知識-圖片水平對齊技巧】相關(guān)文章：
CSS入門(mén)教程01-25
CSS之入門(mén)篇03-05
Html/Css新手入門(mén)攻略01-23
攝影技巧入門(mén)03-22
網(wǎng)球入門(mén)技巧03-28
象棋入門(mén)技巧11-16
素描入門(mén)知識03-08
廚師入門(mén)知識06-11
圖片的使用技巧03-07