CSS入门知识-图片水平对齐技巧

时间:2020-10-14 13:17:33 CSS 我要投稿

CSS入门知识-图片水平对齐技巧

  在CSS中,图片怎么水平对齐,有哪些技巧呢?我们一起来学习一下吧!

  一、图片水平对齐text-align

  在“文本水平对齐text-align”这一节我们详细讲解了text-align属性。大家请记住,text-align一般只用在两个地方:文本水平对齐和图片水平对齐。也就是说,text-align只对文本和img标签有效,对其他标签无效。

  语法:

  text-align:属性值;

  说明:

  text-align属性取值如下表:

  表1 text-align属性

CSS入门知识|图片水平对齐技巧

  <!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>

  在浏览器预览效果如下:

CSS入门知识|图片水平对齐技巧

  分析:

  很多人都以为设置图片水平对齐是在img标签设置,其实这是错误的。大家记住,图片是要在父元素中进行水平对齐的。在这个例子中,img元素的父元素是p,img元素是相对于p元素进行水平对齐的。因此要想对图片进行水平对齐,就要在父元素(p元素)中设置text-align属性。

【CSS入门知识-图片水平对齐技巧】相关文章:

CSS入门教程11-20

css的入门教程11-20

CSS之入门篇10-04

css 书写技巧 CSS 技巧教程简介11-21

Html/Css新手入门攻略11-14

调音技巧入门基础知识07-26

手绘的入门知识及技巧07-31

Breaking(技巧舞)入门知识普及11-29

CSS高级布局技巧01-14