CSS入門知識-圖片水平對齊技巧

在CSS中，圖片怎麼水平對齊，有哪些技巧呢？我們一起來學習一下吧！

　　一、圖片水平對齊text-align

在“文本水平對齊text-align”這一節我們詳細講解了text-align屬性。大家請記住，text-align一般只用在兩個地方：文本水平對齊和圖片水平對齊。也就是説，text-align只對文本和img標籤有效，對其他標籤無效。

text-align:屬性值;

説明：

text-align屬性取值如下表：

　　表1 text-align屬性

<!DOCTYPE html>

<head>

<title>圖片水平對齊</title>

{

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>

</p>

</p>

</body>

</html>

在瀏覽器預覽效果如下：

分析：

很多人都以為設置圖片水平對齊是在img標籤設置，其實這是錯誤的'。大家記住，圖片是要在父元素中進行水平對齊的。在這個例子中，img元素的父元素是p，img元素是相對於p元素進行水平對齊的。因此要想對圖片進行水平對齊，就要在父元素（p元素）中設置text-align屬性。

糯米文學吧