- ベストアンサー
センテンスブロックのセンターリング方法
- テキストを入力した場合、左寄せにしたブロックをセンターリングする方法を教えてください。
- width:500pxでp style, div, ulなどで括れば良いと思いますが、改行されているセンテンスの最大長さに自動的に設定する方法はありますか？
- 一つずつ数値を試してみるのは時間がかかるので、効率的な方法を教えてください。
- tackn881
- お礼率41% (14/34)
- ホームページ作成ソフト
- 回答数1
- ありがとう数15
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- floatを使用すると中央寄せにならない
CSSについて質問があります。 floatを使って2段組のレイアウトにしたのですが、 MacのIE5.2で見ると、floatを使ったdiv（container）だけ中央寄せではなく 左寄せになってしまいます。MacのSafariやFirefoxでは正常に見れました。 URL：http://fuma.xrea.jp/ /* CSSソース*/ html{height : 100%; width : 100%;} body{width : 100%; text-align : center; margin : 0px auto; padding : 0px;} #container{ margin : 0px auto; padding : 0px; width : 720px;} div#main{ text-align : left; width : 490px; margin : 0px; padding : 8px 0px; float : left;} div#side{ margin : 0px; padding-bottom : 8px; text-align : left; width : 230px; float : right;} div#copyright{ text-align : center; margin : 0px auto; padding : 10px 0px; clear : both; width : 720px;} /* HTMLソース */ <div id="container"> <div id="side">てすと</div> <div id="main">てすと</div> </div> <div id="copyright">test</div> <div align="center">を使っても中央寄せになりませんでした。 どうすれば、MacのIEでも中央寄せにできますか？
- ベストアンサー
- CSS
- float横並びにしたブロックの中のul/liを縦並びにさせたい
float leftで横並びさせている中でul/liを縦並びにさせたい。現在はすべて横並びしてしまう。 （html） <div class="base"> <div class="box1"> <a href="#"><img src="#" alt=""></a> </div> <div class="box2"><img src="images/spacer.gif" width="1" height="1" alt=""></div> <div class="box3"> <ul class="list-y"> <li>ああああ</li> <li>いいいい</li> <li>うううう</li> <li>ええええ</li> <li>おおおお<a href="#">かかか</a></li> </ul> </div> </div> （css） ul{ margin: 0; padding: 0; list-style-type: none; text-decoration: none; display: block; } li { margin: 0; padding: 0; display: inline; } .base { width: 618px; height: 100px; margin: 0; padding: 8px 10px 0 10px; text-align: left; line-height: 1.5em; background-image: url(../images/content_bg.gif); background-repeat: repeat-y; } .base .box1 { width: 130px; height: 97px; margin: 0; padding: 0; float: left; outline: solid 2px black; } .base .box2 { width: 2px; height: 100px; margin: 0 5px 0 10px; padding: 0; float: left; border-right: dotted 2px #ccc; } .base .box3 { margin-left: 157px; padding: 0; font-weight: bold; text-align: left; } .list-y{ clear: both; } CSSに疎いのでよろしくお願いいたします。
- ベストアンサー
- CSS
- センター寄せにするには
以下のようなhtmlなのですがulをdivのセンターに配置するにはどうすればできますか？ <div class="pager"> <ul> <li><a href="#">リンク1</a></li> <li><span>リンク2</span></li> <li><a href="#">リンク3</a></li> </div> これに以下のようなcssを設定しているのですが左よりになってしまいます。 .pager { width: 560px; text-align: center; } .pager ul { } .pager ul li { display: inline; float: left; } .pager ul li a, .pager ul li span { display: block; line-height: 20px; margin: 0 5px; width: 20px; height: 20px; text-decoration: none; border: solid 1px #ccc; }
- 締切済み
- HTML
- CSSの左横に隙間ができてしまいます。
画像の左横に謎の隙間(8mmほど)ができて埋まりません。 そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。 padding や vartical-align、text-alignなど試してみましたが、ダメでした。 とても困っています、どなたかご教示くださいますようお願いいたします。 << CSS >> #header { width:940px; height:59px; margin: 0 0 20px 0; } #logo { width:300px; height:59px; float:left; margin: 0 20px 0 0; } #menu { width:620px; height: 59px; padding: 0; margin: 0; float:right; } #menu img { padding-top:8px; border:none; } #menu ul { margin:0; } #menu ul li { margin: 0px; padding: 0px; list-style-type: none; display:inline; float:left; } << HTML >> <div id="header"> <div id="logo"> <img src="img/logo.gif" width="298" height="59" alt="ロゴ"> </div><!-- /#logo --> <div id="menu"> <ul> <li><img src="img/btn_A.gif" width="194" height="51"></li> <li><img src="img/btn_B.gif" width="140" height="51"></li> <li><img src="img/btn_C.gif" width="149" height="51"></li> <li><img src="img/btn_D.gif" width="137" height="51"></li> </ul> </div><!-- /#menu --> </div><!-- /#header -->
- ベストアンサー
- CSS
- 画像のセンターリングについて
真ん中にはなるのですが、IEで見るとwidth900pxにしているのに940pxになったり、firefoxで見るとスクロールすると上下に背景ではなくて画像が動いてしまいます。どうやって治したらいいでしょうか？ html <div id="content"><img src="img/bacttrast.png" alt="aa" /></div> css #content{ padding: 40px; width: 900px; height:790px; margin: 0 auto; }
- ベストアンサー
- ホームページ作成ソフト
- ブロック表示すると重なってしまいます！！
下記のｃｓｓとHTMLでWEBサイトを昔作りました 上部に■いねずみ色のブロックを並べて表示しその下に左に 縦にリスト形式でメニューが並び右にピンクのブロックで項目を並べる 形式にしたのですが、右のブロックの項目の下にテキストで文章を入れたり 何かブロックを足そうとするとブロックが重なってしまい、 上手くできませんでした。 どのようにすればうまく行きますか？教えて下さいよろしくお願いします。 /* mycss.css */ html { background-color: aqua; height: 100%; } body{ height: 100%; font-family: Verdana, Arial; font-size: 14px; } body > #container{ height: auto; } #container { min-height: 100%; height: 100%; width: 90%; margin: 0 auto; padding: 0 10px; background-color: #fff; box-shadow: 0 0 3px rgba(0,0,0,0.5); } #header { width: 100%; height: 80px; background: skyblue; border-radius: 20px; } #menu{ margin-bottom: 15px; overflow: hidden; } #main{ overflow: hidden; margin-bottom: 15px; } #contents{ float: left; width: 25%; font-size: 14px; } #contents ul { margin-bottom: 15px; padding: 10px; } #contents dl{ border-bottom: 10px; border-top: 2px solid #ccc; } #contents dd{ border-top: 2px solid #ccc; } #contents ul>li>a{ text-decoration: none; } #contents ul>li:hover { background: orange; } #sidebar { float: right; width: 70%; } #sidebar ul>li { float: left; width: 230px; height: 25px; font-size: 13px; text-align: center; padding: 4px; background: #ffd8ff; margin-right: 10px; margin-bottom: 10px; border-radius: 4px; text-shadow: 0 1px 0 #fff; } #sidebar ul>li:hover { background: #ddd; } #sidebar ul>li>a{ text-decoration: none; display: block; } #footer{ font-size: 12px; color: #ccc; text-align: center; border-top: 1px solid #ccc; padding: 10px 0 20px; } #menu ul>li { float: left; width: 120px; height: 25px; font-size: 13px; text-align: center; padding: 2px; background: #ccc; margin-right: 10px; margin-bottom: 10px; border-radius: 4px; text-shadow: 0 1px 0 #fff; } #menu ul>li:hover { background: #ddd; } #menu ul>li>a{ text-decoration: none; display: block; } ----------以下HTML------------------------------------------------------------------- <!DOCTYPE html> <html lang="ja"> <head> <meta chraset="shift-jis"> <title>ああああ</title> <link rel="stylesheet" href="mycss.css"> </head> <body> <div id="container"> <div id="header"> <h1>テストページ<A></h1> </div> <div id="menu"> <h2>便利リンク</h2> <ul> <li><a href="">Google</a></li> <li><a href="">Youtube</a></li> <li><a href="">【amazon】</a></li> </ul> </div> <div id="main"> <div id="contents"> <dl> <dt>検索エンジン・リアルタイム</dt> <dd> <ul> <li><a href="">CEEK.JP</a></li> <li><a href="">Google</a></li> <li><a href="">buzztter</a></li> </ul> </dd> </dl> <dl> <dt>SNS/検索エンジン/メール/質問サイト</dt> <dd> <ul> <li><a href="">Facebook</a></li> <li><a href=""">Excite</a></li> <li><a href="">Baidu</a></li> </ul> </dd> </dl> </div><!-- #contents --> <div id="sidebar"> <ul> <li><a href=""_blank">BOOK・OFF Online</a></li> <li><a href="" target="_blank">イーブックオフ</a></li> <li><a href="">infoseekニュース</a></li> </ul> </div><!-- #sidebar --> </div><!-- #main --> <div id="footer">Copyright 2018</div> </div><!-- #container --> </body></html>
- ベストアンサー
- CSS
- <P>タグと<div>タグについて
<P>タグと<div>タグには“前後に空行が入るかどうか”という違いがあるそうですが、下記のようなデータを作り、自分のホームページに記入したところ、前後に全く空行が入りませんでした。 しかし、自分のホームページ以外で、このデータを試してみたところ、<p>タグにはきちんと空行が入るようです。 記入する場所によって、空行が入ったり入らなかったりするのは、なぜなのでしょうか？ ※ブラウザはIE8を使用しています。 <P align="right" style="width:740px;margin:auto;">●●●</p> <P align="right" style="width:740px;margin:auto;">●●●</p> <P align="right" style="width:740px;margin:auto;">●●●</p> <div align="right" style="width:740px;margin:auto;">▲▲▲</div> <div align="right" style="width:740px;margin:auto;">▲▲▲</div> <div align="right" style="width:740px;margin:auto;">▲▲▲</div>
- 締切済み
- その他（インターネット・Webサービス）
- cssで、全体を中央寄せ、文字は左寄せにする方法
CSSで、全体を中央寄せにしつつ、全ての文字を左寄せにする方法を教えてください。 bodyにtext-align: centerを設定し、 #outline{ width:1200px; margin-right:auto; margin-left:auto; text-align:left; } .content{ float:left; width: 1200px; } と書き、<div id="outline"><div class="content">で全体を囲みました。 すると、大方できたのですが、h要素のみずれてしまいます。 （h1は全体に対する左寄せ、h2は全体に対する中央寄せとなってしまいました・・・） h要素は色とフォントサイズを指定したのみです。 CSSについて自体あまり詳しくないので、なぜこうなってしまっているのかわかりません。 どのようにすれば、他と同じく中央左寄せにすることができるでしょうか？ よろしくお願いいたします。
- ベストアンサー
- CSS
- IE6とその他のブラウザでセンターの位置が【微妙】にずれる・・・
XHTML+CSSで作ったのですが、ブラウザのチェックをしたところIE６だけ一部右寄りになってしまいます。 一部というのは、上から「head」「nav」「main」「wrap」としているのですが「nav」と「wrap」部分だけが微妙に右寄り、もしくはその他が微妙に左より？になってしまいます。 センター寄せには基本的に「0px auto」を使用しているので、色々調べたところ、それが原因？と思い、「textalign center」にしてもなぜか少しずれてしまいます。 ためしに、headとnavだけのスリムな状態にしても同じでした。。。 解決方法に心当たりのある方はお願いします。 【CSS】 @charset "shift_jis"; * { line-height: 150%; font-size: 12px; letter-spacing: 1px; } body{ margin:0px; padding:0px; text-align:center; background-repeat: no-repeat; } img { border: none; vertical-align: bottom; } h1 { font-weight: normal; margin: 15px 0 0 50px; } #head{ width:900px; height:69px; background-image: url(img/bg-head.jpg); margin: 0px auto; text-align: left; } #nav { width: 100%; background-image: url(img/bg-nav.jpg); } #nav ul { margin: 0px auto; width: 900px; padding: 0px; list-style: none; height: 31px; } #nav li { float: left; } #main { width: 100%; height: 284px; text-align: center; background-image: url(img/bg-main.jpg); } #wrap{ width:880px; margin:0px auto; text-align:left; padding: 0 10px 0 30px; background-image: url(img/bg-wrap.jpg); background-repeat: repeat-y; } #left{ width:645px; float:left; } #right{ width:220px; float:right; text-align: right; padding: 0px; height: 1200px; background-image: url(img/bg-right.gif); } #foot{ position:relative; width:100%; height:35px; clear:both; background-image: url(img/bg-foot.gif); margin: 0 0 50px 0; } 【html】 <body> <!-- ********* ヘッダー ******** --> <div id="head"> <h1>\\\\\\\\\\\\\\\\\\</h1> </div> <!-- ***** nav ****** --> <div id="nav"> <ul> <li><img src="img/nav_01.jpg" /></li> <li><img src="img/nav_02.jpg" /></li> <li><img src="img/nav_03.jpg" /></li> <li><img src="img/nav_04.jpg" /></li> <li><img src="img/nav_05.jpg" /></li> <li><img src="img/nav_06.jpg" /></li> <li><img src="img/nav_07.jpg" /></li> </ul> </div> <!-- ***** main ****** --> <div id="main"><img src="img/main.jpg" /></div> <div id="wrap"> <!-- ********* 左側 ******** --> <div id="left"> </div> <!-- ********* 右側 ******** --> <div id="right"> </div> <br style="clear:both" /> </div> <!-- ********* フッター ******** --> <div id="foot"> </div> </body>
- ベストアンサー
- HTML
- cssでボックスを横並びにし、横幅指定してもくっついてしまう。
こんにちわ！ 只今CSS課題に取り組んでいるのですが、 フロートを使用し、写真（A）、テキスト（B）、写真（C）、テキスト（D）、と並べたいのですが、（B）に横幅指定しているにもかかわらず、（C）がＩＥではＯＫなのですが、FIREFOXではぴたっとくっついてしまいます。 【html】 <div class="box"> <div class="photo"><img src="img/photo_01.jpg" width="132" height="85"></div> <div class="txt">第23回こまったな<br>どうしたのかな賞<br>受賞</div></div> <div class="box"> <div class="photo"><img src="img/photo_02.jpg" width="132" height="85"></div> <div class="txt">第23回どなたかー<br>助けてください賞<br>受賞</div></div> </div> .box{ width : 258 px; margin: 0px; float:left; } .photo{ width : 132 px; margin: 0px; float:left; } .txt{ width : 123 px; color: #555555; font-size: 12px; text-align: left; margin: 0px 0px 0px 3px; padding: 0px ; line-height:18px; float:left; } となっております。 何故、ＩＥでは大丈夫でFirefoxでは内容によって横幅が変わってしまうのでしょうか？ ご教授願いませんでしょうか～？ 宜しくお願い致します。
- ベストアンサー
- HTML
お礼
完璧な回答、そしてサンプルまで掲載していただきまして ありがとうございます！ display:table; を使えば良いんですね。 素晴らしい！