ホームページ作成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>
こうなります
スタイルシート(その2)text-align:方向;margin-方向:auto;
リストを<div>〜</div>
で囲い、それに対して
text-align:center;
margin-left:auto;
margin-right:auto;
を適用して中央に表示する方法になります。
この方法に関しての詳細は、レイアウト > 範囲を中央に表示する(センタリング)にて紹介してますので参照して下さい。
ホームページ作成TOP > リスト > リストを表示する(中央) > このページのTOP ▲
スポンサードリンク
無料メール情報誌
ワンランクUP講座
ホームページのスタイルをワンランクアップ!基本調整や特選方法、さらにはインターネットの話題までメールマガジンでお届けします。
サイト内検索
おすすめ1冊
全体レイアウトを実際のサイト事例を使用し、詳細までを解説。
スタイルシートの使い方のバリエーションを知る事ができる1冊。
スタイルシートの使い方のバリエーションを知る事ができる1冊。
おすすめソフト
Webデザインに最適な新しいインタフェイスを備え、Webグラフィックをより簡単・効率的に制作することができます。
検証結果