CSS入門知識(shí)-圖片水平對(duì)齊技巧

時(shí)間：2024-07-20 08:39:35 CSS 我要投稿

相關(guān)推薦

　　在CSS中，圖片怎么水平對(duì)齊，有哪些技巧呢？我們一起來(lái)學(xué)習(xí)一下吧！

CSS入門知識(shí)-圖片水平對(duì)齊技巧

　　一、圖片水平對(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>

　　<head>

　　<title>圖片水平對(duì)齊</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>

　　在瀏覽器預(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入門教程01-25

CSS之入門篇03-05

攝影技巧入門03-22

象棋入門技巧11-16