html如何让图片与低端平齐,CSS入门知识-图片水平对齐技巧

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

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

一、图片水平对齐text-align

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

语法：

text-align:属性值;

说明：

text-align属性取值如下表：

表1 text-align属性

图片水平对齐

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;}

在浏览器预览效果如下：

分析：

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

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