亚洲国产日韩欧美在线a乱码,国产精品路线1路线2路线,亚洲视频一区,精品国产自,www狠狠,国产情侣激情在线视频免费看,亚洲成年网站在线观看

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

時(shí)間:2024-07-20 08:39:35 CSS 我要投稿
  • 相關(guān)推薦

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

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

CSS入門(mén)知識(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>

  <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入門(mén)知識(shí)-圖片水平對(duì)齊技巧】相關(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)知識(shí)03-08

廚師入門(mén)知識(shí)06-11

圖片的使用技巧03-07