一、释义
text-align:
作用于文字和图片,达到居左中右效果。如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div01{
text-align: center;
}
</style>
</head>
<body>
<div id="div01">
<div>CSS</div>
<img src="./Day008CSS动画/风景.jpg" alt="">
</div>
</body>
</html>
![](https://img-blog.csdnimg.cn/img_convert/8958f166800c4e8b6cc13137da6b6e0a.png)
float:
是元素脱离标准文档流,释放空间,即浮动在表面,达到居左右效果。如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div01{
text-align: center;
}
</style>
</head>
<body>
<div id="div01">
<div>CSS</div>
<img src="./Day008CSS动画/风景.jpg" alt="">
</div>
</body>
</html>
![](https://img-blog.csdnimg.cn/img_convert/099f83d758b6e7df0500a08f7c16b2b8.png)
会出现父元素坍塌问题。
二、区别
text-align必须设置在父元素中,子元素生效;而float直接作用于元素本身,如果父元素没有宽高就会出现高度坍塌。