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

html-css021

CSS入门知识-图片水平对齐技巧,第1张

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属性。

实现div+css实现图片与文字水平对齐,首先需要的是用3个div布局，一个div包裹着其他的2个，给每个div设置好一定的宽度和高度，然后在对包裹的2个div使用float这个属性，float

属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在

CSS

中，任何元素都可以浮动。具体可以看下代码：

<html>

<head>

<style>

#round{

width:600px

height:300px

}

#div1{

width:200px

height:250px

float:left

}

#div2{

width:200px

height:250px

float:left

}

</style>

</head>

<body>

<div

id='round'>

<div

id='div1'>

<img

src='图片地址'>

</div>

<div

id='div2'>

<p>我是测试文字</p>

</div>

</div>

</body>

</html>