- ベストアンサー
★CSS★親ボックスの中で子ボックスを真ん中に。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
＞vertical-align:middle; は、テーブルのセルにしか通用しませんよ それ以前にもし有効だとしてもalign指定するのはその親要素にでしょう？ 今回のケースではあまり推奨されませんが、display:table-cell をつかってみるとか・・・ <style> .imgs { display:table-cell; height: 160px; width: 160px; background-Color:red; text-align:center; vertical-align:middle; } </style> <div class="imgs"> <img src="1.jpg"> </div> とすると、縦横でセンタリングします。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLがどのように書かれているかわからないのですが、 vertical-alignは、table-cellにのみ有効なプロパティです。 したがって、画像を縦巾の中央に配置するなら、 1)親コンテナブロックをtable-cellにする 2)親ブロック内で画像を画像サイズに合わせてひとつずつ位置を指定する。 親要素をrelativeにしてabsoluteで配置するのが簡単 3)背景画像として指定する。 下記は、(1)と(3)のサンプルです。いずれもLynxでは同じに見えます。≒検索エンジンでは同じに読み取ってくれます。 ※Another HTML-lint gateway( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ※The W3C Markup Validation Service( http://validator.w3.org/#validate_by_input ) で検証済み。 ★タブは＿に置換してあります。戻して確認してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- div.album ol,div.album ol li{ ＿display:block;list-style:none; ＿margin:0;padding:0; ＿border-spacing:10px; } div.album ol li{ ＿width:100px;height:100px; ＿border:solid 1px blue; ＿text-align:center; } div.type1 ol li{ ＿display:table-cell; ＿vertical-align:middle; } div.type2 ol li{ ＿float:left; } div.type2 ol li{ ＿background-position:50% 50%; ＿background-repeat:no-repeat; ＿margin:5px; } div.type2 ol li span{ ＿display:none; } --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<div class="album type1"> ＿＿<ol> ＿＿＿<li><img src="./images/thumbnail/RIMG0002.jpg" width="80" height="68" alt="フセ"></li> ＿＿＿<li><img src="./images/thumbnail/RIMG0016.jpg" width="80" height="51" alt="タテ"></li> ＿＿＿<li><img src="./images/thumbnail/RIMG0021.jpg" width="80" height="50" alt="コイ"></li> ＿＿＿<li><img src="./images/thumbnail/RIMG0024.jpg" width="80" height="48" alt="ツケ"></li> ＿＿</ol> ＿</div> ＿<div class="album type2"> ＿＿<ol> ＿＿＿<li style="background-image:url(./images/thumbnail/RIMG0002.jpg)"><span>フセ</span></li> ＿＿＿<li style="background-image:url(./images/thumbnail/RIMG0016.jpg)"><span>タテ</span></li> ＿＿＿<li style="background-image:url(./images/thumbnail/RIMG0021.jpg)"><span>コイ</span></li> ＿＿＿<li style="background-image:url(./images/thumbnail/RIMG0024.jpg)"><span>ツケ</span></li> ＿＿</ol> ＿</div> </body> </html>
お礼
ご丁寧にありがとうございます。 お手数をおかけしました。 勉強になりました。 ありがとうございました。
関連するQ&A
- ★CSS★
CSSについて質問です。 firefoxでは下記を記載し、たてよこの真ん中に表示することができました。 IEではセンターにすることはできましたが、ミドルにすることができませんでした。 display:table-cell; が効かないのでしょうか？ IEでもミドルにできる方法を教えてください。 .imgs{ display:table-cell; height: 160px; width: 160px; text-align:center; vertical-align:middle; } <div class="imgs"> <a class="aaa" href="./pop.php> <img class="imgtf" id="imgtf" alt="タイトル" src="images/thumbnail/eee.jpg"> </a> </div> よろしくお願いします。
- ベストアンサー
- CSS
- 画像をボックスの中心に位置付けたい…
ネットで調べていくつかのパターンを試してみましたが、 vertical-align:middle;が全然かかりません。。。 同じボックスをいくつも作ってその中に様々なサイズの画像を配置したいのです。 .bb_box{ width:210px; height:90px; display:table-cell; text-align:center; vertical-align:middle; layout-grid-line:90px; } .b_img{ vertical-align:middle; } <div class="bb_box"><img src="○○○" alt="○○" width="91" height="33" border="0" class="b_img" /></div> 間違い箇所がたくさんあるかと思いますがご教示ください。よろしくお願いいたします。
- ベストアンサー
- CSS
- CSSでのブロックのセンタリングについ
いつもお世話になっております！ BackgroundにFlashを指定して、その上に別のブロックがくるように指定しています。 FlashのCSSの指定が、#flashと#flash object。その上に#flash.sectionが表示されるようにしているのですが、 Flashの大きさとFlash.sectionのWidthが違うせいか、Flash.sectionが画面の中央に表示されません。 FlashのWidthが1800pxでその真ん中（900px地点）からFlash.sectionが表示されてしまいます。 これをうまく、画面の中央に表示されるよう、指定することはできないでしょうか？ ご存知の方、何卒ご教授願います！！！ CSS指定は下記の通りです。 div#sub{ text-align:center; overflow:auto; } #flash { width:1800px; height:340px; margin:0 auto; position:relative; text-align:center; } #flash object { position:absolute; top:0; left:0; z-index:0; } #flash .section { position:relative; z-index:5; width:1000px; text-align:center; margin:0 auto; }
- ベストアンサー
- CSS
- 【CSS】positionの親子関係について
あるボックスを親として、そこにコンテンツを配置したいと思っています。 flaot は使わず、posiotion で位置を指定する想定で、下記のスクリプトを書きました。 （該当箇所以外の部分は省きます） << CSS >> #container { position: relative; } #main { position: absolute; top: 10px; } #side { position: absolute; top: 10px; right: 10px; } << HTML >> <div id="container"> <p><img src="container.png" width="700" height="400"></p> <div id="contents"> <p><img src="main.png" width="550" height="650" id="main"></p> <p><img src="side.png" width="100" height="650" id="side"></p> </div> </div> これを実行すると、main は container に合わせて移動がされる（親子関係になっている）のですが、side のみ、ウィンドウサイズに合わせて移動をしてしまいます。 relative と absolute で親子関係を作る、という考え方自体は合っていると思うのですが、何か法則など（親子関係は一対一でなければならない等）あるのでしょうか。 CSSの勉強を始めたばかりのため、お詳しい方にご解説をお願いしたいです。。
- ベストアンサー
- CSS
- CSSのpositionについて質問です。
下記のサンプルについてですが、このソースは、ジャバスクリプトなど ＣＳＳなどを含んだプロフラムの一部（ＣＳＳ）の部分です。 場所の指定を変更したいだけなので、ＣＳＳの部分だけを抜粋しました。（全て抜粋すると、ソースが多くなるので） 質問は、下記のソースを、ＨＴＭＬ内で、テーブルを作ってその中で 表示させるための質問ですが、positionをstatic | relative | absolute | fixed に変えればいいだけの話だと思うんですが、 ちっと理解できません。色々思考錯誤しましたが、いまいち理解できないし、上手くいきません。 /* dock2 - bottom */ #dock2 { width: 100%; bottom: 0px; position: absolute; left: 0px; } .dock-container2 { position: absolute; height: 50px; background: url(images/dock-bg.gif); padding-left: 20px; } a.dock-item2 { display: block; font: bold 12px Arial, Helvetica, sans-serif; width: 40px; color: #000; bottom: 0px; position: absolute; text-align: center; text-decoration: none; } .dock-item2 span { display: none; padding-left: 20px; } .dock-item2 img { border: none; margin: 5px 10px 0px; width: 100%; } こちらが質問のソースです。これだけで分からないかもしれませんが、 お願いします。もしあれでしたら、ソース全体と、外部ファイルなどを ＨＰにアップロードして質問したいとも考えています。 参考サイトは http://coliss.com/articles/build-websites/operation/javascript/295.htmlの「CSS Dock Menu」です。 質問が雑ですが、お願いします
- ベストアンサー
- HTML
- CSSに追加した、footer記述が不完全か
footer 部を下記の通りCSSに追加したが、画面の最大化では正常ですが、最小化にすると右に横ずれを生じ、どこを修正すべきか分からず解決出来きません。 どうかご教示のほどお願いします。 （例題を参考にして記述したものです。） html{ position: relative; min-height: 100%; padding-bottom: 100px; } div#footer{ font-size: 12px; position: absolute; left: 150px; （例題は、 left: ０; であるが、大幅に左にずれる。） bottom: 0; width: 960px; （例題は、width: 100%; であるが、右にずれて、設置した仕切り線が無限に右に伸びる現象になる。） height: 100px; } 参考までにCSSに既に記述している---次のwrapper 表示に関係があるのでしょうか。 div#wrapper{ margin: 0 auto; text-align: left; width: 100%; line-height: 1.6; }
- ベストアンサー
- CSS
- CSSで画像を中央に持っていく方法。
簡単な問題です。 画像を liの枠内の上下左右中央に配置するには、どうすればいいでしょうか？ 画像のサイズがまちまちなので、 paddingなどで数値を指定するのは、NGです。 vertical-align:middleはだめでした。 text-align:centerで左右の中央に持って行く所まで、できました。 HTML ==================== <ul class="book_slide"> <li><img src="image/bookmihon.jpg" width="51" height="75" alt="*" /></li> <li><img src="image/bookmihon.jpg" width="51" height="75" alt="*" /></li> </ul> ====================== css ======================= ul.book_slide li{ float:left; height:114px; width:80px; border:1px solid #000; text-align:center; } =======================
- ベストアンサー
- CSS
- position:fixedが親要素に準じて表示してくれません。。
position:fixedが親要素に準じて表示してくれません。。 <div id="relative"> <div id="flashContent"><img></div> <div id="TopBnr"><img></div> </div> ーーCSS－ーーーーーーーーーーーーーーーーーーーーーーーーーーーー #relative { position:relative; width:990px; height:374px; margin:0px auto; } #flashContent { width:990px; height:374px; margin:0px auto; z-index:0; } #TopBnr { position:fixed; width:260px; height:90px; right:90px; top:30px; z-index:1; } Ie6対応済みです。。 なぜかIeでの配置はできているのですが、 それ以外のブラウザでは、親要素に準じて配置してくれません。 どなたか解決策を教えてください。。
- 締切済み
- HTML
- ボックス内中央配置特殊版
<div><img src="sss.jpg"></div> でdivの中央に画像を配置したいとき cssで実現しようと思ったら div{ width:100px; height:100px; display:table-cell; text-align:center; vertical-align:middle; } あたりでできそうですが、画像がボックスより小さい場合はこれでいいのですが、 今回やりたいのはボックスより大きな画像の中央をボックスの中央に配置し、 ボックスからはみ出したものはover-flow:hiddenで見切りたいのです。 cssだけで実現可能でしょうか？ js使って画像をposition:ablosute にして位置計算する手は頭に浮かんでますが、もっとシンプルにできそうな気がして質問してみました。
- ベストアンサー
- HTML
- firefox,IEの両方で縦横真ん中にしたい
CSSについて質問です。 firefoxでは下記を記載し、たてよこの真ん中に表示することができました。 IEではセンターにすることはできましたが、ミドルにすることができませんでした。 IEでもミドルにできる方法を教えてください。 （質問が悪かったので再度質問させてください） .imgbox{ width:160px; height:160px; display:block; display:table-cell; vertical-align:middle; } div.album2 ol{ display:block; list-style:none; margin:0;padding:0; } div.album2 ol li{ display:block; list-style:none; margin:0;padding:0; text-align:center; } .imgtf{ max-height:160px; max-width:160px; } <div class="imgbox"> <div class="album2"> <ol> <li><a href="./popphp"><img class="imgtf" src="images/thumbnail/eee.gif"></a></li> </ol> </div> </div> よろしくお願いします。
- 締切済み
- CSS
お礼
たびたびご丁寧にありがとうございます。 助かりました。