text-align对什么元素有效
分类：实例代码
text-align属性最常见的应用场景是设置文本的对齐方式。
当然它不仅可以设置文本的对其方式，还有其他功能，下面进行一下介绍。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
div {
width: 250px;
height: 250px;
border: 1px solid green;
text-align: right;
}
.children {
border: 1px solid blue;
width: 100px;
}
</style>
</head>
<body>
<div>
<div class="children">前端教程网</div>
</div>
</body>
</html>
text-align不能作用于div，不过div中文本右对齐，说明text-align具有继承性。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
div {
width: 250px;
height: 250px;
border: 1px solid green;
text-align: right;
}
.children {
border: 1px solid blue;
width: 100px;
}
</style>
</head>
<body>
<div>
<span class="children">前端教程网</span>
</div>
</body>
</html>
text-align属性能够作用于span元素，可以将span元素在div中右对齐。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
div {
width: 250px;
height: 250px;
border: 1px solid green;
text-align: right;
}
.children {
border: 1px solid blue;
width: 100px;
}
</style>
</head>
<body>
<div><img src="mytest/div+css/border.jpg" border="0" alt="战斗机" /></div>
</body>
</html>
text-align属性能够作用于img元素。
总结如下：
（1）.text-align不能设置块级元素本身的对齐方式。
（2）.text-align可以设置文本的对齐方式。
（3）.text-align可以设置内联/内联块级元素的对齐方式。
（4）.text-align可以设置图片的对齐方式。
text-align对什么元素有效，这样的场景在实际项目中还是用的比较多的，关于text-align对什么元素有效就介绍到这了。
text-align对什么元素有效属于前端实例代码，有关更多实例代码大家可以查看。