締切済み

CSSで上下左右にセンタリングするテンプレを作りたい

2008/10/31 11:33

下記のdivの部分をCSSで上下左右にセンタリングしたいと考えています。 <div id="tp"> コメント<br> コメントコメント<br> コメントコメントコメント<br> コメントコメントコメントコメント<br> <img src="photo.jpg" width="400（この数値は画像によって変わります）" height="520（この数値は画像によって変わります）"> </div> 画像は縦長になったり横長になったりします。何百枚と作成予定なので、コメントと画像を変えるだけのテンプレが作れればと考えております。ブラウザはIE6とFirefoxに対応させたいです。どう記述したら良いのでしょうか？よろしくお願い致します！！

tamorisan1
お礼率48% (167/346)

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

回答全件

試していませんが、下記のページが参考にならないでしょうか。 ht…

2008/10/31 12:17

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

みんなの回答

nori_007
ベストアンサー率35% (369/1048)

2008/10/31 12:17 回答No.1

試していませんが、下記のページが参考にならないでしょうか。 http://blog.livedoor.jp/dankogai/archives/51011227.html ご確認ください。

全文を見る

ログインすると、全ての回答が全文表示されます。

関連するQ&A

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
センタリングのＨＴＭＬの挿入場所
お世話になっております。前回の質問の追加をしようとしたのですが、うまくできず、新たにスレッドを立てました。すみません。以下のＨＴＭＬは横並びに写真を載せたもの（数行あります）です。（上部に文章を載せるための式がありますが、カットしています。）このプログラムのどこにセンタリングの式を入れたらいいのか、私の知識ではわかりませんでした。またご教示もらえると助かります。よろしくお願いします。 </DIV> <DIV style="top : 1313px; </DIV> <DIV style="top : 1473px;left : 327px; position : absolute; z-index : 3; " id="Layer8"><IMG src="button2.gif" width="81" height="35" border="0" alt="Ｂａｃｋ"></DIV> <DIV style="top : 1060px;left : 21px; position : absolute; z-index : 8; width : 698px; height : 123px; " id="Layer6"> 　 <IMG src="DSC_19711.jpg" border="0" width="160" height="106"> <IMG src="DSC_20401.jpg" border="0" width="160" height="106"> <IMG src="DSC_20541.jpg" border="0" width="160" height="106"> <IMG src="DSC_21231.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 883px;left : 15px; position : absolute; z-index : 7; width : 649px; height : 165px; " id="Layer5"> 　　 <IMG src="DSC_19311.jpg" border="0" width="160" height="106"> <IMG src="DSC_19381.jpg" border="0" width="160" height="106"> <IMG src="DSC_19411.jpg" border="0" width="99" height="149"> <IMG src="DSC_19631.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 572px;left : -3px; position : absolute; z-index : 5; " id="Layer3"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> 　　 <IMG src="DSC_17481.jpg" border="0" width="160" height="106"> <IMG src="DSC_18051.jpg" border="0" width="160" height="106"> <IMG src="DSC_18151.jpg" border="0" width="160" height="106"> <IMG src="DSC_18351.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 729px;left : 12px; position : absolute; z-index : 6; " id="Layer4"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> <IMG src="DSC_18421.jpg" border="0" width="160" height="106"> <IMG src="DSC_18641.jpg" border="0" width="160" height="106"> <IMG src="DSC_18941.jpg" border="0" width="160" height="106"> <IMG src="DSC_19201.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> </BODY>
- ベストアンサー
- ホームページ作成ソフト
ＣＳＳレイアウトの配置ずれについて
本を見ながらＨＴＭＬとＣＳＳを作成したのですが、どのブラウザで見てもclass指定した"slideItems"の位置が右にズレてしまいます。解決方法わかる方、教えてください。以下、htmlとcssです。 html↓ <body> <div id="newBook"> <div class="item"> <ul id="slideItems"> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li>  <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li>  <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> </ul> </div> <div class="leftBtn"> <a href="javascript:startmove('left');"><img src="img/prev.gif" alt="左へ" width="25" height"25" border="0" /></a></div> <div class="rightBtn"> <a href="javascript:startmove('right');"><img src="img/prev_r.gif" alt="左へ" width="25" height"25" border="0" /></a> </div> </div> </body> css↓ #newBook { margin: 30px; position: relative; } .item { height: 115px; width: 500px; padding: 10px 0px; overflow: hidden; position: absolute; left: 40px; top: 0px; } .leftBtn,.rightBtn { text-align: left; width: 40px; position: absolute; top: 0px; } .leftBtn { text-align: left; left: 0px; } .rightBtn { text-align: right; left: 540px; } .item ul { width: 1500px; position: absolute; left: 0px; top: 0px; } .item li { background-color: #999999; height: 100px; width: 100px; list-style-type: none; padding: 10px 0px 5px; float: left; text-align: center; } #slideItems { position: absolute; left: 0px; top: 0px; }
- 締切済み
- その他([技術者向] コンピューター)
画像のサムネール+フォトアルバムを制作中で困っています
こんにちは。 HTML + CSS + Javascriptを使用して、「サムネール画像+フォトアルバム」を作っています。 Javascriptの知識が乏しいため、質問させていただきました。よろしくお願いいたします。サムネール画像の並ぶ A.html 拡大画像の並ぶ B.html CSS外部をリンクさせている C.css Javascriptを外部リンクさせている D.js の4つのファイルがあります。 A.htmlでクリックした際に数字を記憶させて B.htmlに入れ込むことがしたいです。 □A.htmlは下記で画像を並べています。 <img src="images/photo1.jpg" alt="Photo" width="120" height="120" > <img src="images/photo2.jpg" alt="Photo" width="120" height="120" > <img src="images/photo3.jpg" alt="Photo" width="120" height="120" > <img src="images/photo4.jpg" alt="Photo" width="120" height="120" > 　　　　　　　　　　・　　　　　　　　　　・　　　　　　　　　　・　　　　　　　　　　・　　　　　40枚くらいあります。 □B.htmlは下記で画像を表示しています。 <div id="mainPhoto"> <img src="images/photo1.jpg" id="slidePhoto" /> </div> <div id="mainPhotoNavi"> <script type="text/javascript">count = 0; imageLength = 9; baseuri = 'images'</script> <script src="js/slideshow.js" type="text/javascript"></script> </div> ※A.htmlのphoto3.jpgをクリックしたら、3という数字が記憶されて、　B .htmlの"mainPhoto"内部のphoto(x).jpg、(x)に当てはまる。　　　　　　"mainPhotoNavi"内部のcount = (x)、(x)に当てはまる。上記のような方法をとりたいです。どうか、よろしくお願いいたします。
- 締切済み
- JavaScript
CSSに詳しい方
ブログで「マウスオーバーで画像を拡大」っていうのを取り入れたいのですが、上手くいきません。画像は拡大されますが、外枠を固定できず困ってます。 http://webya-tm.com/archives/1703 こちらのページを参考に「画像をマウスオーバーしたときに「拡大」する」がやりたいことです。 <html> ・・・ <div class="entry_body"> 　<p style="text-align: right;">公開日：2014/10/04</p> 　<img src="http:～.jpg" alt="～" title="～" border="0" width="600" height="294" /> 　＜本文＞ </div> ・・・ </html> htmlの構造的にはこういう感じになってて、 <img src="http:～.jpg" alt="～" title="～" border="0" width="600" height="294" /> の部分を <div class="img-block"> <img src="http:～.jpg" alt="～" title="～" border="0" width="600" height="294" /> </div> と書き換え、さらにCSSに .img-block { width: 600px; height: 300px; overflow: hidden; } と追記すれば上手くいきました。ただ、すべての<img src～の部分を <div class="img-block"> <img src～ </div> と書き換えるのは、すごく大変な作業なので、その方法以外で今のままのHTMLで、CSSを書き換えるだけで http://webya-tm.com/archives/1703 こちらのページの「画像をマウスオーバーしたときに「拡大」する」をやる方法はないでしょうか？ ↓今のCSSです。 img { transition: 0.4s; } .entry_body { 　width: 600x; overflow: hidden; } img:hover { -moz-transform: scale(1.2,1.2); -webkit-transform: scale(1.2,1.2); -o-transform: scale(1.2,1.2); -ms-transform: scale(1.2,1.2); } ※overflow: hidden;というのが働いてくれない状態です。
- ベストアンサー
- CSS
HTML CSS 表示画像のサイズ
表示画像のサイズについて。元の画像サイズはばらばらです。初歩的な質問ですがよろしくお願いします。 <tr> <td><img src="images/A.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/B.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/C焼.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> これをCSSで書く場合なのですが、 img{ 　　width：100 height：100 border：2 } としたのですが、うまくいきません。なぜでしょうか？
- ベストアンサー
- HTML
css　左右にわけて表示したい
こんにちは、下記のhtmlとcssを作り、 pico_leftContentsとpico_rightContentsを 50％づつページの左と右にわけて表示したいのですが思ったように動いてくれません。どこがおかしいでしょうか？ html <div id="pico_leftContents"> <img width="300" height="300" src="http://www.～～～.jpg" alt="<{$category.title}>"> </div> <div id="pico_rightContents" class="pico_controllers3"> <p><{$category.desc}></p> </div> css div.pico_leftContents { float:left; width:50%;} div.pico_rightContents { float:right; width:50%;}
- ベストアンサー
- HTML
CSSのdivで何故かボックスセンタリング出来ない
CSSのdivで何故かボックスセンタリング出来ません。全体を中央に寄せたいと思っています。質問させていただきます。まず、全体をdivで囲い、 #contena { margin-right: auto; margin-left: auto; width: 1000px; height: 1000px; } と、記述したのですが、何故かボックスセンタリングになりません。しかも、ナビゲーションだけ、センタリングされています。下記に、htmlを記述します。4000文字入るはずですが、これも何故か400文字程の数が入りきらないので、途中まで記載します。詳しい方がいましたら、よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>名称未設定-1</title> <link rel="stylesheet" type="text/css" href="./index.css" media="all">  </head> <body> <div id="contena"> <form action="#" method="get"> <div id="Div"> </div> <div id="Div2"> </div> <h3 id="見出し_3"> This Month PicUp </h3> <div class="1"> <p class="lastNode">テキスト </p> </div> <div id="Div3"> </div> <h3 id="見出し_32"> This Month PicUp </h3> <div class="2"> <p class="lastNode">テキスト </p> </div> <div class="Txt_メールアドレス"> <p class="lastNode">メールアドレス </p> </div> <input type="text" name="テキストフィールド__mac" id="テキストフィールド__mac" value=""> <input type="submit" id="ボタン__win" value="送信"> <img src="images/index_r2_c2.gif" alt="" id="index_r2_c2"> <table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="600">  <tr> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="99" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="100" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="1" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="100" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="2" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="101" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="100" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="97" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="1" height="1"></td> </tr> <tr> <td colspan="8"><img name="navibar4_r1_c1" src="images/navibar4_r1_c1.gif" width="874" height="223" alt=""></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="1" height="157"></td> </tr> <tr> <td rowspan="3"><img name="navibar4_r2_c1" src="images/navibar4_r2_c1.gif" width="99" height="343" alt=""></td> <td><a href="index1.html"><img name="navibar4_r2_c2" src="images/navibar4_r2_c2.gif" width="100" height="28" alt=""></a></td> <td rowspan="3"><img name="navibar4_r2_c3" src="images/navibar4_r2_c3.gif" width="1" height="343" alt=""></td> <td rowspan="2"><a href="navibar.html"><img name="navibar4_r2_c4" src="images/navibar4_r2_c4.gif" width="100" height="30" alt=""></a></td> <td rowspan="3"><img name="navibar4_r2_c5" src="images/navibar4_r2_c5.gif" width="2" height="343" alt=""></td> <td rowspan="2"><a href="navibar1.html"><img name="navibar4_r2_c6" src="images/navibar4_r2_c6.gif" width="101" height="30" alt=""></a></td> <td><a href="javascript:;" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','navibar4_r2_c7','images/navibar4_r2_c7_s2.gif','images/navibar4_r2_c7_s4.gif',1);" onClick="MM_nbGroup('down','navbar1','navibar4_r2_c7','images/navibar4_r2_c7_s3.gif',1);"><img name="navibar4_r2_c7" src="images/navibar4_r2_c7.gif" width="100" height="28" alt=""></a></td> <td rowspan="3"><i
- ベストアンサー
- ホームページ作成ソフト
css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（
css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（超初心者です。）現在、Kompozerをつかってホームページを作成しています。添付画像のような配置にしたいので、いろいろなサイトを参照したのですがどうしてもうまくいきません。現在のソースは以下のようになっており、ブラウザで表示すると背景画像が表示されません。あまりにも知識がなく、不快な思いをさせてしまったら申し訳ございません。ご指導いただければうれしいです。よろしくお願いします。＊ソース <html><head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title>ページタイトル</title> <style type="text/css"> </style> </head><body> <div style="text-align: center;" background-image:="" url ＊＊.jpg ;width:450px;height:450px;=""><br> <br> <img style="width: 137px; height: 137px;" alt="" src="＊＊.gif" border="0"><br> <br><p style="text-align: center;"> <a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><img style="width: 92px; height: 230px;" alt="" src="＊＊.jpg"><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><br></p> </div> </body></html>
- ベストアンサー
- HTML
IE7にのみ有効なCSSソース
お世話になっております。写真を縦に４枚並べているのですが、間が4pxあけたいのに、8px空いてしまいます。IEのみ有効のCSSソース「アンダーバー」を使用すると、IE6では、有効ですが、IE7では、有効となりません。いい方法はありますか。（CSSソース) #left img{ margin:0 4px 4px 4px; _margin:0 4px 0px 4px; /* 　IE　のみ有効 */ padding:0px; } (Ｈｔｍｌソース） <div id="left"> <h2>取扱商品（一例）</h2> <img src="ephoto/truck1.jpg" width="112" height="83" alt="トラック1" /> <img src="ephoto/truck2.jpg" width="112" height="83" alt="トラック2" /> <img src="ephoto/truck3.jpg" width="112" height="83" alt="トラック3" /> <img src="ephoto/truck4.jpg" width="112" height="83" alt="トラック4" /> <img src="ephoto/truck5.jpg" width="112" height="83" alt="トラック5" /> </div>
- ベストアンサー
- その他（インターネット・Webサービス）

CSSで上下左右にセンタリングするテンプレを作りたい

みんなの回答

関連するQ&A

注目のQ&A

カテゴリ
一覧

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

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

CSSで上下左右にセンタリングするテンプレを作りたい

みんなの回答

関連するQ&A

注目のQ&A

カテゴリ 一覧

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

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

カテゴリ
一覧

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