- 相關(guān)推薦
CSS入門知識(shí)-圖片水平對(duì)齊技巧
在CSS中，圖片怎么水平對(duì)齊，有哪些技巧呢？我們一起來(lái)學(xué)習(xí)一下吧！
一、圖片水平對(duì)齊text-align
在“文本水平對(duì)齊text-align”這一節(jié)我們?cè)敿?xì)講解了text-align屬性。大家請(qǐng)記住，text-align一般只用在兩個(gè)地方：文本水平對(duì)齊和圖片水平對(duì)齊。也就是說(shuō)，text-align只對(duì)文本和img標(biāo)簽有效，對(duì)其他標(biāo)簽無(wú)效。
語(yǔ)法：
text-align:屬性值;
說(shuō)明：
text-align屬性取值如下表：
表1 text-align屬性
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>圖片水平對(duì)齊</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>
在瀏覽器預(yù)覽效果如下：
分析：
很多人都以為設(shè)置圖片水平對(duì)齊是在img標(biāo)簽設(shè)置，其實(shí)這是錯(cuò)誤的。大家記住，圖片是要在父元素中進(jìn)行水平對(duì)齊的。在這個(gè)例子中，img元素的父元素是p，img元素是相對(duì)于p元素進(jìn)行水平對(duì)齊的。因此要想對(duì)圖片進(jìn)行水平對(duì)齊，就要在父元素（p元素）中設(shè)置text-align屬性。
【CSS入門知識(shí)-圖片水平對(duì)齊技巧】相關(guān)文章：
css的入門教程06-27
CSS入門教程10-14
css 書寫技巧 CSS 技巧教程簡(jiǎn)介09-19
word圖片居中對(duì)齊的操作步驟10-24
調(diào)音技巧入門基礎(chǔ)知識(shí)05-22
Html/Css新手入門攻略08-25
關(guān)于網(wǎng)頁(yè)圖片屬性的CSS教程06-15
在excel表格中怎么設(shè)置水平垂直居中對(duì)齊?04-13