CSS入门知识-图片水平对齐技巧
在CSS中,图片怎么水平对齐,有哪些技巧呢?我们一起来学习一下吧!
一、图片水平对齐text-align
在“文本水平对齐text-align”这一节我们详细讲解了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:60pxheight: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属性。
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<style>标签中,输入css代码:button {display: inline-block}。
3、浏览器运行index.html页面,此时2个按钮水平对齐了。
在CSS中,我们可以使用各种方法和技术来使对齐项目,例可以水平和垂直对齐项目。下面本篇文章就来给大家介绍一些使用CSS对齐项目的方法,希望对大家有所帮助。
1、margin : auto
此属性用于将块元素水平对齐到中心。
示例:
注意:使用margin : auto在IE8中不起作用,除非声明了!DOCTYPE。
效果图:
2、position: absolute
我们可以使用position: absolute来对齐项目。
示例:
效果图:
3、text-align: center
我们可以在各种标签中使用text-align: center;它可以将任何用HTML编写的文本对齐。
示例:
效果图:
4、line-height属性
想要垂直对齐项目,我们可以使用line-height属性。line-height 属性设置行间的距离(行高)。
示例:
效果图:
5、padding和text-align属性
我们可以使用padding属性和text-align : center的组合来垂直和水平对齐文本。
示例:
效果图:
本文参考地址: https://www.html.cn/qa/css3/10403.html