ホーム >>> HTML整理ノート

text-align　テキストの水平方向の配置を指定

構文　{text-align: left | right | center}
　・それぞれ＜左揃え／右揃え／中央揃え＞になる
　・テキストだけでなく、画像、ボタンなどの配置にも適用可能。
　（表とフォームはIEでは配置できるが、Fiefox3.6とGoogle Chromeでは反映し
　　なかった）

Sample

左配置

中央配置

右配置

これは 中央配置された 表です

右配置されたフォーム

Sample Source......................................................................>>>

<div  style="width:500px;border:1px solid navy">
　<p style="text-align:left">左配置</p>
　<p style="text-align:center">中央配置</p>
　<p style="text-align:right">右配置</p> 
</div>
<div  style="width:500px;border:1px solid navy">
　<p style="text-align:left"><img src="../../images/anime/16.gif" width="32"></p>
　<p  style="text-align:center"><img src="../../images/anime/16.gif" width="32"></p>
　<p  style="text-align:right"><img src="../../images/anime/16.gif" width="32"></p>
</div>
<div  style="width:500px;border:1px solid navy">
　<p style="text-align:left"><button>左配置されたボタン</button></p>
　<p style="text-align:center"><button>中央配置されたボタン</button></p>
　<p style="text-align:right"><button>右配置されたボタン</button></p> 
</div>
<div  style="width:500px;border:1px solid navy">
　<div style="text-align:center">
　　<table border="1">
    <tr>
      <td>これは</td>
      <td>中央配置された</td>
      <td>表です</td>
    </tr>
　　</table></div>
　<div style="text-align:right">
　　<form name="form1" style="width:280px;border:1px solid red">
 　　　 <p>右配置されたフォーム</p>
  　　　<input type="text" name="textfield" value="これはTextBoxです">
  　　　<select name="select">
   　　　　<option value="1" selected>Test1</option>
   　　　　<option value="2">Test2</option>
   　　　　<option value="3">Test3</option>
  　　　</select>
  　　　<input type="button" name="btn" value="ボタンです">
　　 </form></div>
</div>