リストのセンタリング方法について

2023/08/09 09:33

このQ&Aのポイント

リストのセンタリング方法について調査しました。ブラウザごとに異なる表示結果があり、センタリングしたい箇所がブラウザの左端に寄ってしまうことがあります。marginやlist-style-typeを使用して試しましたが、うまくいきませんでした。おすすめの方法はないか、どのようにすればセンタリングできるか、詳細を知りたいです。
リストのセンタリングに関して調査しましたが、ブラウザのバージョンやリストのスタイルによって異なる表示結果が得られるようです。マージンを使用してセンタリングを試みましたが上手くいきませんでした。リストスタイルタイプの指定や他の方法を試しても同様の結果でした。どのような方法を使用すれば、ブラウザに依存せずにセンタリングできるのか知りたいです。
リストのセンタリング方法について調査しました。センタリングするためにはマージンを使用する方法が一般的ですが、ブラウザによってはうまく機能しないことがあります。また、list-style-typeを使用する方法では「・」が表示されなくなってしまいます。この問題を解決するための方法を探しています。どのような方法がありますか？

ベストアンサー

リストの「・」をセンタリングする方法について

2010/03/01 14:12

<ul style="text-align:center"> <li><a href="XX">項目１行目</a></li> <li><a href="YY">項目２行目</a></li> </ul> このようにしてリスト表示をセンタリングさせており、ブラウザチェックをしていたらFire Fox(3.5.8)、Chrome(4.0.249.89)、safari(4.0.4) で表示が　・　　　　　　　　　　　　項目１行目　　　　　　・　　　　　　　　　　　　項目２行目となってしまい、文字はセンタリングしてくれましたが、「・」がブラウザの左端に寄ってしまいセンタリングしてくれません。他のブラウザ(IE、opera)では「・」もセンタリングされているのですが… テーブルの時も同じような現象に陥ってしまい、 margin-left:auto;margin-right:auto;と指定する事で回避出来たのですが、今回も同様の方法で<ul style="margin-left:auto;margin-right:auto;">やってみましたが、無反応… で、今度はautoではなくてpx数で指定すれば上手く「・」が移動してくれたのですが、ブラウザ画面を小さくしてしまうと文字が潰れてしまい、断念。更にlist-style-type:none;で指定してやれば見た目的にはセンタリングしていますが、「・」が無いのでいまいち… どのようにしたらこれらのブラウザでちゃんと「・」がセンタリングするようになるのでしょうか？よろしくお願い致します。

nardobrea
お礼率14% (11/74)

HTML
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#187541

2010/03/01 22:15 回答No.1

こんばんは。マーカーの表示位置が外側になっているからでしょう。内側にすればうまくいきます。 ulのstyleに　list-style-position:inside　を加えるといいでしょう。

質問者

補足 2010/03/02 10:48

M-SOFT様ありがとうございます。教えて頂いた方法で無事マーカーがセンタリングされました。本当にありがとうございました

関連するQ&A

cssでリストを横並びのセンタリング
現在、サイトをHTMLからHTML5に移行中なのですが、リストを横並びにするところまではできたのですが、それをセンタリングするにはどうしたら良いでしょうか？さまざまなサイトを巡ってやり方を拝見したのですが、目的とするものがありませんでした。現在のHTML  <div id="header"> <h1>サイトタイトル</h1> <p class="catch"><strong>サイト説明</strong></p> <div class="opening"> <h2><img src=".jpg" alt="表示されなかった画像の説明的な" width="900" height="260"></h2> </div> <ul class="nl clearFix"> <li class="active"><a href="#">１</a></li> <li><a href="#">２</a></li> <li><a href="#">３</a></li> <li><a href="#">４</a></li> <li><a href="#">５</a></li> <li><a href="#">６</a></li> <li><a href="#">７</a></li> </ul> <hr class="none"> </div>  現在のcss /* --- ヘッダメニュー --- */ #header ul.nl { width: 100%; /* IE 6のために幅の指定が必要 */ margin: 0 auto; padding: 0; background-color: #ffffff; /* ヘッダメニューの背景色 */ list-style-type: none; text-align: center; } /* メニュー項目 */ #header ul.nl li { width: 124px; /* 項目の幅 */ float: left; line-height: 100%; } /* 最初の項目と最後の項目 */ #header ul.nl li.first, #header ul.nl li.last { width: 125px; /* 項目の幅 */ } わかりにくいと思いますが、上のように配置したいのです。まだイマイチ理解しきれていないのですが、回答していただければと思います。 ↓HPの現状。 http://dateme.web.fc2.com/top.html
- ベストアンサー
- CSS
css リストを右揃えにできません。。。
非常にシンプルなことができず、頭を抱えています。縦に並んだリストを、右揃えにしたいです。 ulに便宜的にborderをつけていますので、そのボックスの右にピッタリ並べたいのですが …　text-align、margin　二通りの指定で試したものの左揃えになってしまいます（Mac　safari firefox）。なんで～～？？　どなたかドウゾ助けてください。よろしくお願いします。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style></style> </head> <body> <ul class="align"> <li><a href="" title="">AA</a></li> <li><a href="" title="">BBBBB</a></li> <li><a href="" title="">CCC</a></li> <li><a href="" title="">DDDD</a></li> </ul> <ul class="align"> <li>AA</li> <li>BBBBB</li> <li>CCC</li> <li>DDDD</li> </ul> <ul id="margin"> <li><a href="" title="">AA</a></li> <li><a href="" title="">BBBBB</a></li> <li><a href="" title="">CCC</a></li> <li><a href="" title="">DDDD</a></li> </ul> </body> </html>
- ベストアンサー
- HTML
リストに指定したマークの位置がずれてしまいます
特定のブラウザでリストで指定したマークの位置がずれてしまい困っています。 safari,firefoxは大丈夫なのですが、IE7,operaだと文字に対してより過ぎて、さらに文字半個分、左斜め上に表示されてしまいます。リストマークのサイズは20×20です。マークをlist-style-type: square;などにすると普通に表示されます。非常に困っています。宜しくお願いします。 <style type="text/css">  </style> <style type="text/css">  </style> <link rel="shortcut icon"href="/images/favicon.ico" /> <style type="text/css">  </style> </head> <body> <div id="base"> <ul> <li> <a href="main.html" target="mainFrame">Home</a></li> <li> <a href="image.html" target="mainFrame">Image</a></li> <li> <a href="flash.html" target="mainFrame" >Flash</a></li> <li> <a href="logic.html" target="mainFrame" >Music</a></li> <li> <a href="link.html" target="mainFrame"> Link</a></li> </ul> </div> </body>
- ベストアンサー
- HTML
CSSを用いてリストを横並びにして、それを2行にまたがせる方法
CSS を用いて、リストを横並びにしたのはいいのですが、そのリストの数が多く、2行にまたがらざるを得ません。 Firefox ですと枠内に入りきらないリストは自動的に改行して表示してくれるのですが、IE ですと入りきらないリストを右端に無理矢理表示（縦に伸びていきます）し、そのリストの次から2行目と移り変わります。 -- HTML -- <div id=content> <ul> <li><a href="">AAA</a></li> <li><a href="">BBB</a></li> <li><a href="">CCC</a></li> <li><a href="">DDD</a></li> <li><a href="">EEE</a></li> <li><a href="">FFF</a></li> </ul> </div> -- CSS -- #content ul　{ padding: 0; margin: 0; list-style-type: none; } #content li　{ float: left; display: block; padding: 2px 10px 0 5px; margin: 0; list-style-type: none; } 上記の例ですとEEEが1行目に入りきらない場合、Firefox では、EEEが2行目へとなって後が続きます。 IEですと EEE のうち E 1文字だけでも入ると残りの2文字は下方へずれて行きます。そして、FFFから2行目となります。このIEでの不具合で良い解決法があれば、ご教授願います。よろしくお願い致します。
- ベストアンサー
- HTML
メニューの横並びで改行されてしまう。
ul　li　を使用して、横並びのメニューを作成したいのですが、最後の項目が、横に並びきれなくて、下の段に移ってしまいます。 border幅や、marginも計算してpxで指定しているつもりですが、上手くいきません(TдT) 何故ですかね？ HTML <body> <div id="wrapper"> <header> <nav> <ul> <li><a href="#">about</a></li> <li><a href="#">information</a></li> <li><a href="#">party</a></li> <li><a href="#">access</a></li> <li><a href="#">contact</a></li> </ul> </nav> </header> </div> CSS #wrapper { width: 985px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } nav ul { list-style-type:none; } nav li { float:left; width:190px; border: 1px #ffb366 solid; text-align:center; margin-right:5px; }
- ベストアンサー
- CSS
フロートしたリストのセンタリング
勉強が足りなくて済みません！教えて下さい。以下の通り、リストをfloatして横1列に並べたところ、どうしても画面中央に表示することが出来ません。divで囲ってそれをtext-align:center;しても駄目でした。解決策をお教え下さい。宜しくお願いします。 html------------------------------- <ul id="navi_footer"> <li><a href="#">ホーム</a></li> <li><a href="specialroom.htm">客　室</a></li> <li><a href="privatespa.htm">貸切温水プール</a></li> <li><a href="privatespa2.htm">貸切露天風呂</a></li> <li><a href="reservation.htm">客室料金</a></li> <li><a href="ryori.htm">料　理</a></li> <li><a href="kinen.htm">記念日</a>｜</li> <li><a href="interior.htm">インテリア</a></li> <li><a href="gaikan.htm">外　観</a></li> <li><a href="access.htm">アクセス</a></li> <li><a href="info.html">特　典</a></li> </ul><br class="clear"> css------------------------------- ul#navi_footer { text-align: center; margin: auto;} ul#navi_footer li { float: left; list-style-type: none; font-size: x-small;} br.clear { clear: both;}
- ベストアンサー
- CSS
CSS で li を float させる方法
リスト項目を横並びにfloatさせたいいんですが、 li {list-style:none url(../image/icon/article.png) inside;} と指定すると、floatできないようです。どうすればlist-styleを指定したliをfloatさせることできますか？コートは以下のようにしています。よろしくお願いします。【HTML】 <div class="YYY"> <ul> <li class="movie"><a href="">MOVIE</a></li> <li class="photo"><a href="">PHOTO</a></li> </ul> </div> 【CSS】 .YYY {margin:10px 0;} .YYY ul {margin:0px;padding:0px;} .YYY li.photo {float:left;list-style:none url(photo.png) inside;} .YYY li.movie {float:left;list-style:none url(article.png) inside;}
- ベストアンサー
- HTML
画像を挿入して横並びのメニューリストを作ったのです
が、margin-top,margin-bottom(margin-leftはききます）がききません。何が原因でしょうか？以下がソースです。～html～ <ul id="menu"> <ul> 　　　　<li>a href="#"><img src="〇〇.jpg"alt="〇〇" width="167" height"59"/></a></li> <li><a href="#"><img src="△△.jpg"alt="△△" width="167" height"59"/></a></li> 　　　　　　　　　　　　　　　　　　　　　　　　　　省略　　　 </ul> ～css～ ul#menu {margin-left: 45px} ul#menu li {list-style-type: none; float: left} ul#menu li a {display: block; width: 181px} ul#menuのところに記述しましたが、変化ありませんでした。
- ベストアンサー
- CSS
list-style-imageがきかない。
下記のようにリストの中黒を画像にしたいのですが、Chromeでは画像が表示されず、中黒のままです。原因が分る方教えてください。 SafariとFireFoxでは表示されます。 [html] <ul> <li><a href="concept.html">コンセプト</a></li> <li><a href="gallery.html">ギャラリー</a> </li> </ul> [CSS] li { margin-bottom:15px; margin-left:50px; list-style-image:url("../img/xxx.png"); }
- ベストアンサー
- CSS
CSS 横並びリストの書き方はどちらがよいでしょうか
スタイルシートで横並びリストを作成するとき、li { display: inline; } を使う方法と、li { display: block; float:left; } を使う方法がありますよね。皆さんは、意識して、使い分けられていますか？どちらで表現しようか、よく迷います。どちらの方法でも同じレイアウトにできるように思ってしまっていて。。でも自分の気付いていないデメリットがあるのかな？と気になります。「こうしたい場合、こちらのレイアウトだと無理」とか、「これではこのブラウザで表示が崩れる」など、お気づきのことがあれば、教えていただけないでしょうか。下に、自分で確認用に作ったhtmlがあるので、そのままブラウザで見ていただければと思います。お手数ですが、よろしくお願いします。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>横並びサンプル</title> <style type="text/css">  </style> </head> <body> <div id="yoko1"> <ul> <li><a href="#">あ</a></li> <li><a href="#">い</a></li> <li><a href="#">う</a></li> </ul> </div> <div id="yoko2"> <ul> <li><a href="#">あ</a></li> <li><a href="#">い</a></li> <li><a href="#">う</a></li> </ul> </div> </body> </html>
- ベストアンサー
- HTML

リストのセンタリング方法について

リストの「・」をセンタリングする方法について

質問者が選んだベストアンサー

補足 2010/03/02 10:48

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

リストのセンタリング方法について

リストの「・」をセンタリングする方法について

質問者が選んだベストアンサー

補足 2010/03/02 10:48

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

カテゴリ
一覧

専門家に質問してみよう
専門家登録