亚洲一级免费看,特黄特色大片免费观看播放器,777毛片,久久久久国产一区二区三区四区,欧美三级一区二区,国产精品一区二区久久久久,人人澡人人草

CSS

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

時間:2024-09-26 22:14:02 CSS 我要投稿
  • 相關推薦

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

  在CSS中,圖片怎么水平對齊,有哪些技巧呢?我們一起來學習一下吧!

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

  一、圖片水平對齊text-align

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

  語法:

  text-align:屬性值;

  說明:

  text-align屬性取值如下表:

  表1 text-align屬性

  <!DOCTYPE html>

  <html xmlns="http://www.w3.org/1999/xhtml">

  <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屬性。

【CSS入門知識-圖片水平對齊技巧】相關文章:

css的入門教程06-27

CSS入門教程10-14

css 書寫技巧 CSS 技巧教程簡介09-19

word圖片居中對齊的操作步驟10-24

調(diào)音技巧入門基礎知識05-22

Html/Css新手入門攻略08-25

關于網(wǎng)頁圖片屬性的CSS教程06-15

在excel表格中怎么設置水平垂直居中對齊?04-13

股票入門基礎知識之從開戶到操作的技巧05-03

股票入門基礎知識:周K線分析技巧08-29