smallにtext-allignが効かない

Question

phpファイルにおいてＨＴＭＬで<small>タグの文章だけ右寄せしたかったのでtext-allign: right;としたのですが、右によりません。

なぜこんな風になるのでしょうか？

できればこういった事態になった場合、ＨＴＭＬに詳しい人の調べ方も教えてほしいです。
（ググる等、初歩的なことは調べてから質問しているつもりです。）

ORUKA1951 · Accepted Answer

要素は、非置換インライン要素に分類されます。smallのサイズは文字数のままですので、文字幅いっぱいの幅の中では「どうあがいても、右にも左にも寄れません。　smallで囲んだ部分を、デザイン上別の場所に表示したい場合・・・たとえば、header内のh1要素におけるsmallを下に表示したいとかの場合・・　

私の著書紹介

　　・・・・というHTMLに対して、 div.header h1{margin-top:30px;position:relative;} div.header h1 small{ display:block;width:10em;position:absolute;top:-25px;left:10px;background-color:yellow;text-align:right;} 詳しくは、テキスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/text.html#alignment-prop ) でも、通常はこんな無理はしません。そもそも、HTMLが文書構造にしたがって正しくマークアップされているとは思えません。　smallは、「小さいフォントで表示する(HTML4.01)」要素でしたが、 15.2.1 フォントスタイル要素: TT、I、B、 BIG、 SMALL、 STRIKE、S、及びU要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/graphics.html#edef-SMALL ) この様なプレゼンテーションのためだけの要素は、HTMLの趣旨に反するため、HTML5では、「small 要素は、補足事項などの細字部分を表すようになりました。」 3.3. 変更された要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#changed-elements ) 　HTML自体をまず見直してください。

kosukejlampnet · Answer

smallはインライン要素だからです。ブロック要素のタグなら、おそらく意図したような動きになると思います。
なので、display:block;を入れるとかやってしまう方法もないわけではありませんが、本来の使い方をしていないということで、仕様書に基づいた書き方とは言えないでしょう。

> できればこういった事態になった場合、ＨＴＭＬに詳しい人の調べ方も教えてほしいです。
何でこうなるの？と思ったところで、大体HTMLの仕様書を読んで解決します。自分は。。。

smallにtext-allignが効かない

<small>要素は、非置換インライン要素に分類されます。

smallはインライン要素だからです。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング