Home > Article > Web Front-end > text-align的作用对象是什么_html/css_WEB-ITnose
text-align的作用对象是什么_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:31:351630browse
text-align的作用对象是什么:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
可能这个问题比较简单，但是还是有很多初学者使用text-align属性来对齐div、span元素。其实这是错误的认识，text-align属性用来规定对象内文本的对齐方式。代码实例如下:
实例一:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><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.softwhy.com/" /><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元素。
实例三:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><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作用于图片。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4652
更多内容可以参阅:http://www.softwhy.com/divcss/
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js实现动态操作table_html/css_WEB-ITnoseNext article：了解canvas_html/css_WEB-ITnose