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对什么元素有效属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容