非同期スニペット

<ul><li> 横に並べたリストの中央揃え

サイト内検索

Loading

お知らせ

現在は特にありません。
メールでのお問い合わせは、こちら

Work with us!

私たちのビジネスの成功は、社会に貢献できると確信してます。

ワサビは、才能や情熱を持った方との出会いを待ってます。

インターネットで出来る事、その可能性を仕事にしたい方は、ご連絡ください!

採用の詳細は、こちら

blog (Recent Posts)

Categories

タグクラウド

Archives

制作・運用約款

  • スマートウェブへのリンク

Contact

  • ワサビ株式会社
  • 657-0843
    兵庫県神戸市灘区大石北町7-14
  • TEL. 078-862-5942
  • 受付時間: 平日 -
  • 上記時間外: 070-5503-3830
<< 当月 >>
JavaScriptが無効です。

<ul><li> 横に並べたリストの中央揃え

Posted on

  • 横並びにしたリストを中央に揃える方法はいくつかあります。

    基本的には、「display: inline-block」を使ってます。

    通常floatでleftやrightなどを使ってますが、「float: center」というプロパティがないので利用してますが、IE7以下やFirefox2に対応していないため、下記のプロパティを追記します。

    display: -moz-inline-box;
    /display: inline;
    /zoom: 1;
    

    下記は、このサイトのグローバルナビゲーションの記述です。

    <blockquote>nav {
    	width: 950px;
    	margin: 0px auto;
    	padding: 0px 10px 0px 10px;
    	overflow: hidden;
    	font-size: 1.5em;
    	font-weight: bold;
    }
    
    	nav ul {
    		text-align:center;
    	}
    
    	nav ul li {
    		list-style: none;
                    display: inline-block;
    		 display: -moz-inline-box;
      		/display: inline;
      		/zoom: 1;
    		padding: 0px 3px 0px 3px;
    	}</blockquote>
    

    他にもやり方は、あると思いますが今のところがこれが一番分かりやすいです。

    カテゴリー : CSS / CSS3 

    関連記事:

    1. WordPress mod_rewriteと.htaccessの設定

    Facebook Comments

    Leave a Reply

ページトップへ