左右継承と限界

ソース：

<DIV STYLE="TEXT-ALIGN: CENTER">
   <H2>見出し</H2>
     <P>DIV要素のTEXT-ALIGN属性が<BR>
       P子要素に継承され、<BR>
       P要素内も中央揃えになります。<BR>
       画像（IMG要素）も同様です。<BR>
       <IMG SRC="cat-home.gif" width="88" height="83" alt="猫の絵">
     </P>
<TABLE border="5"  width="60">
  <TBODY>
    <TR>
      <TD>1</TD>
      <TD>2</TD>
    </TR>
    <TR>
      <TD>3</TD>
      <TD>4</TD>
    </TR>
  </TBODY>
</TABLE>
     <P STYLE="TEXT-ALIGN:RIGHT">
	子要素で<BR>
	あらためて<BR>
	ALIGN属性が<BR>
	指定されると、<BR>
	子要素の<BR>
	指定を受けます。
     </P>
     <P>しかし、次の新しい子要素の指定が無いと親要素の影響を受け元に戻ります。</P>

</DIV>

表示結果：

CENTER要素

<CENTER>要素は、「<DIV STYLE="TEXT-ALIGN：CENTER">」と同じような働きをするものです。もともと「<CENTER>」はNetscape Navigatorが独自に作った要素でしたが、簡単に全体を中央揃えにできて広く利用され、HTMLの正式仕様とし採用されました。対して「DIV」は後発で、スタイルシートの指定に利用できたり、ALIGN属性で中央揃えや左右寄せにもできるという、利便性を高めたものになっています。今でもブロックレベルの<CENTER>〜</CENTER>のほうが簡単に記述でき利用されることが多い要素ですが<CENTER>は、非推奨になっていますので使わないようにしましょう。
W3Cでは、スタイルシートを推奨してます。

TEXT-ALIGN の限界

TEXT-ALIGN は左右寄せと中央揃えはできますが、「TEXT-ALIGN:値」だけでは上下の配置との兼ね合わせ同じ行で、左右に文字を配置する、といったことも実現不可能です（下の例を参照）。
複雑な指定の場合スタイルシートの別のプロパティで指定すると「右端から200ピクセル空けたところに配置」とか、「左2/3に揃えて」といった複雑なレイアウトは出来ます

ソース：
<DIV>
<P STYLE="TEXT-ALIGN:LEFT">左寄せの部分
<SPAN STYLE="TEXT-ALIGN:RIGHT">右寄せの部分</SPAN></P>
</DIV>

↑上のように、どうしても同じ行で左右にすることはできません。
HTML のみで出来るレイアウトには、かなり多くの制約があります。テーブル（表）やスタイルシートの領域のプロパティを使用することで可能になります。例えば、W3C の Web Style Sheets 内の表示文字が重ねられるように・・・

テーブル（表）を利用して同じ行で左右に分けるには、例えば下のサンプルのように出来ます。
詳しくは、テーブルをご覧下さい。

<table border="0">
  <tbody>
    <tr>
      <td style="text-align:left">テーブルを使用した<br>左寄せの部分</td>
      <td style="text-align:right">テーブルを使用した<br>右寄せの部分</td>
    </tr>
  </tbody>
</table>