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>

　　<head>

　　<title>图片水平对齐</title>

　　{

　　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>

　　</p>

　　</p>

　　</body>

　　</html>

　　在浏览器预览效果如下：

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

　　分析：

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

[网页程序设计]最新文章

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