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

2017-01-07 00:00:00少芬 网页程序设计

  在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属性。

[网页程序设计]相关推荐

[网页程序设计]相关栏目推荐
查看更多
上一篇:CSS3导航条和毛玻璃效果制作方法 下一篇:wap版、手机版以及web的区别