ホームページ作成(リストを作りたい)
無料!発信中!メール情報誌!

ホームページ作成しよう!
HTML〜スタイルシート

ホームページ作成TOP > リスト > リストを表示する(中央)
リストを表示する(中央)

リストを中央に表示する方法です。

sample
  • 項目1行目
  • 項目2行目
HTML 

リストを中央に表示するにはスタイルシートにて行います。

ホームページ作成TOP > リスト > リストを表示する(中央) > このページのTOP ▲

スタイルシート text-align:center

リストをスタイルシートで中央に表示するには、リスト自体の<ul>や<ol>に対してtext-align:centerを適用します。

要素に直接書く
書き方は

<ul style="text-align:center">
<li>項目1行目</li>
<li>項目2行目</li>
</ul>

ホームページ作成TOP > リスト > リストを表示する(中央) > このページのTOP ▲

headに書く
書き方は

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">

 <style type="text/css">
 <!--

         ul   { text-align:center;}

 -->
 </style>
 </head>
 <body>

         <ul>
         <li>項目1行目</li>
         <li>項目2行目</li>
         </ul>

 </body>
</html>
こうなります
IE
IE
Firefox
Opera
スタイルシート(その2)text-align:方向;margin-方向:auto;

リストを<div>〜</div>で囲い、それに対して

  • text-align:center;
  • margin-left:auto;
  • margin-right:auto;

を適用して中央に表示する方法になります。

この方法に関しての詳細は、レイアウト > 範囲を中央に表示する(センタリング)にて紹介してますので参照して下さい。

ホームページ作成TOP > リスト > リストを表示する(中央) > このページのTOP ▲