ホームページ > 記事 > ウェブフロントエンド > text-align_html/css_WEB-ITnoseの機能は何ですか
text-align_html/css_WEB-ITnoseの機能は何ですか
- WBOYオリジナル
- 2016-06-24 11:31:351636ブラウズ
text-align の用途:
推奨事項: コードをできるだけ手書きすることで、学習の効率と深さを効果的に向上させることができます。
おそらくこの問題は比較的単純ですが、text-align 属性を使用して div 要素とspan 要素を整列させる初心者がまだ多くいます。実際、これは間違った理解です。 text-align 属性は、オブジェクト内のテキストの配置を指定するために使用されます。コード例は次のとおりです。
例 1:
<!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 属性は継承されます。
例 2:
<!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 属性が spam 要素に作用できることがわかります。
例 3:
<!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/