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属性。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
</style>
</head>
<body>
<div style="text-align:centerwidth:500px">
图片总要放到一个层里吧...宽度随意的.加上居中代码即可.
<img src="file:///E|/web/baidu_logo.gif" width="270" height="129" />
</div>
</body>
</html>
有个办法是写8个div标记对，中间加img插入图片，然后设置float：left。第2、4、6个div设置css属性clear：right，这样就能够实现自动浮动成每2张图片为一排，后面的图片自动对齐的效果了
