CSS入門知識-圖片水平對齊技巧
- 網頁設計
- 關注:1.15W次
在CSS中,圖片怎麼水平對齊,有哪些技巧呢?我們一起來學習一下吧!
一、圖片水平對齊text-align
在“文字水平對齊text-align”這一節我們詳細講解了text-align屬性。大家請記住,text-align一般只用在兩個地方:文字水平對齊和圖片水平對齊。也就是說,text-align只對文字和img標籤有效,對其他標籤無效。
語法:
text-align:屬性值;
說明:
text-align屬性取值如下表:
表1 text-align屬性
<!DOCTYPE html>
<html xmlns="">
<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標籤設定,其實這是錯誤的'。大家記住,圖片是要在父元素中進行水平對齊的。在這個例子中,img元素的父元素是p,img元素是相對於p元素進行水平對齊的。因此要想對圖片進行水平對齊,就要在父元素(p元素)中設定text-align屬性。
- 文章版權屬於文章作者所有,轉載請註明 https://xuezhezhai.com/zh-tw/sjzz/sjzz/d6nvkn.html