text-align_html/css_WEB-ITnoseの機能は何ですか-htmlチュートリアル-php.cn

text-align_html/css_WEB-ITnoseの機能は何ですか

WBOY

リリース： 2016-06-24 11:31:35

オリジナル

1655 人が閲覧しました

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/