1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > html如何让图片与低端平齐 CSS入门知识-图片水平对齐技巧

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

时间:2021-05-18 22:19:23

相关推荐

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入门知识-图片水平对齐技巧】相关文章:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。