- ベストアンサー
画像を中心に配置したい
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
画像以外も入らなければ、 <p class="logo"><img></p> p.logo{ width:200px; /* 画像巾 */ height:150px; /* 画像高さ */ padding: 20px 30px 40px 30px;/* 上 右 下 左 */ background-color:green; } 単純に img[src="HTMLに書かれたもの"]{padding:40px;background-color:green;} もしくは、 img[src="HTMLに書かれたもの"]{border:green 40px;} でもよいし・・
関連するQ&A
- 画像と背景色の幅が合わない
画像サイズも設定しているのですが、なぜか画像の下にスペースが空きます。 vertical-alignを入れてみたのですが、解決しません。 問題なのは、 ・画像と画像の間にスペースが空く ・画像と画像のスペースの下に、下線が表示される（画像をよく見ていただければ分かると思います。） ・画像の下に空白ができる <HTML> <div class="gazou" align="center"> <nobr> <a href="アドレス"><img src="gazou1.jpg" width=190 height=50></a> <a href="アドレス"><img src="gazou2.jpg" width=190 height=50></a> 以下、同様に続く・・・ </nobr></div> <CSS> div.gazou { clear: both; background-color: #0099ff; vertical-align: text-bottom; } ※画像は改行なしで横並べ。 画像のサイズは正しく指定してあります。
- ベストアンサー
- CSS
- CSSで画像配置の垂直方向指定
画像をいくつも展示するページを製作しているのですが、画像の垂直方向指定がうまくいきません。 縦長の画像と、横長の画像(サイズは同じ)を二枚横に並べたときに添付画像の下の方のように表示させたいのです。 タグはそれぞれしたのようなかんじです。 *****************CSS***************** #photo { margin:0 0 0 30px; padding:0; background: transparent; text-align:center; font-size : 1em; color:#69788A; } .image { font-size : 0.9em; margin : 0; padding : 10px 0 10px 0; float:center; width : 800px; border-bottom:2px solid #CFDEEF; } .left-img { float: left; width : 50%; } .right-img { float: right; width : 50%; } *****************HTML***************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css"> <title>***********</title> <style type="text/css"> body { background: transparent; } </style> </head> <body id="photo"> <div class="image"> <p class="left-img"><img src="016.jpg" border="0"></p> <p class="right-img"><img src="017.jpg" border="0"></div> </body> </html> よろしくお願いします。
- ベストアンサー
- HTML
- 画像をセンター配置にする方法
過去ログを検索したのですが、同じような方法が載っていなくて質問させていただきます。 以下の画像にある通り、img_01とimg_02とimg_03を画面中央に配置したいのですがどうしてもうまくいきません。 根本的な部分の理解ができていないかもしれませんが、どうかご教授お願いします。 【HTML】 <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題</title> <link href="css/common.css" rel="stylesheet" type="text/css" /> </head> <body> <!--▼▼ヘッダーここから▼▼--> <div id="header"> <p>ヘッダー</p> </div> <!--▲▲ヘッダーここまで▲▲--> <!--▼▼メインここから▼▼--> <div id="main"> <ul> <div id="main_site01"> <p class="center">aaa01</p><li><img src="images/site01.jpg" width="300" height="200" alt="01" /></li><p class="center">aaa01</p> </div> <div id="main_site02"> <p class="center">aaa02</p><li><img src="images/site02.jpg" width="300" height="200" alt="02" /></li><p class="center">aaa01</p> </div> <div id="main_site03"> <p class="center">aaa03</p><li><img src="images/site03.jpg" width="300" height="200" alt="03" /></li><p class="center">aaa01</p> </div> </ul> </div> <!--▲▲メインここまで▲▲--> <!--▼▼フッターここから▼▼--> <div id="footer"> <p>フッター</p> </div> <!--▲▲フッターここまで-▲▲--> </body> </html> 【HTMLここまで】 -------------------------------------------------------------------------------- 【CSS】 @charset "utf-8"; /*******************/ /* リセットcss */ /*******************/ * { margin: 0; padding: 0; list-style-type: none; line-height: 1.6; font-family: "メイリオ","ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3"; } img { border: none; } /*******************/ /* コンテンツ */ /*******************/ body { background-color: #000; } #header { height: 100px; margin-top: 50px; font-size: 18px; background-color: #fff; } #main { color: #FFF; width: 990px; text-align: center; } #main ul li { float: left; margin: 0 15px 15px; } #main_site01 { float: left; } #main_site02 { float: left; } #main_site03 { float: left; } .center { text-align: center; margin-top: 15px; } #main ul { text-align: center; } #footer { height: 100px; font-size: 18px; color: #000; clear: both; background-color: #fff; } 【CSSここまで】
- ベストアンサー
- ホームページ作成ソフト
- 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
- CSSで背景画像をウインドウの中心（横方向）に配置する方法？
過去質問したのですが、解決していないのでまた質問させて頂きます。CSSでウインドウの大きさを変えても指定した背景やコンテンツがずっと中心にいさせる方法はありますか？Yahooのような縦長のページにしたいと思っています。いまの段階は760pxの幅でずっと左側にいるようになっています。中心に移動させたいです。以下に参考のためにソースをのせておきます。 --- css --- h1{ margin-top: 0px; margin-bottom: 10px; text-align:center; } p{ text-align:center; margin-top: 0px; margin-bottom: 10px; } body{ margin-top: 0px; } #maincontents{ width:70%; background-image:url(../img/sakanay.jpg); background-position: center; margin-right: auto; margin-left: auto; } --- html --- <body> <div id="maincontents"> <p align="left"><font size="-3">Team X</font></p><br> <h1><img src="img/ten02.jpg"></h1> <p><img src="img/2005g.jpg"></p> <hr> <a>Copyright(c)2006 TX All rights reserved.</a> <p> </p> <br> </div> </body>
- ベストアンサー
- HTML
- 画像の配置（上下の間隔）で教えて下さい。
初心者なのですが、本についていたｒｏｍを使って ＨＰを作成中です。 使用しているフォントの関係で、文字を加工して画像としてＵＰしたいのですが、その文字（画像）の間隔が広すぎて、どうしたらいいのかわかりません。 <table width="400"border="0 "align="center" cellpadding="0"lspacing="0"> <tr><td> <div align="center"><img src画像1.gif" width="700" height="300"vspace="10"> <img src画像2.gif" width="700" height="300"vspace="10"> </div></tr> </td> </tr> </table> <p align="center"> </p> こういった形になっているのですが、 どう直せば画像の間隔が狭くなるのでしょうか？ 宜しくお願いします。
- 締切済み
- HTML
- CSSで 画像をかさねたい
お世話になります。 CSSで 画像をかさねたいんです。 下になる画像を「背景」にして それで２つを重ねればいいのかと思いましたが、どうもうまくいきません。 CSSソースは .left{ width:182px; background:url(sideback.gif) float:left; } .left-midashi{ width:182px; text-align: center; } ＊「float:left」がはいっているのは、右隣にメインの枠があるからです HTMLは↓ <div class="left"> <div class="left-midashi"><img src="sidemanu-canner.gif"></div> </div> です。 初心者なので凡ミスかもしれませんが、自分ではよくわからなくなってしまいました。。。よろしくおねがいいたします。m(_ _"m)ペコリ
- ベストアンサー
- HTML
- 横並びの写真の上下に複数行の説明文を付けたい。(再質問)
横並びの写真の上下に複数行の説明文を付けたい。(再質問) 前回中途半端な質問をしてしまいましたので、改めて質問し直します。 横並びの写真の説明文をその写真の上下に掲載したいのですが、 <Table>を使用せずに、各画像の上下に幅に合わせて個別の複数行の文章をつけることできないでしょうか? 私の場合 ３画像を次のとおり、 <DIV ALIGN="center"> <IMG SRC="images/a.jpg" WIDTH="150" BORDER="2"> <IMG SRC="images/b.jpg" WIDTH="200" BORDER="2" HSPACE="50"> <IMG SRC="images/c.jpg" WIDTH="200" BORDER="2"> </DIV> ２画像の横並びを次のとおりに表示しています。 <DIV ALIGN="center"> <IMG SRC="images/d.jpg" WIDTH="300" BORDER="2" HSPACE="40"> <IMG src="images/e.jpg" WIDTH="400" BORDER="2" HSPACE="40"> </div>
- 締切済み
- HTML
- 正方形のセルに縦画像、横画像を中央に配置
よろしくお願いいたします。 テーブルを使って、写真のサムネイル一覧表を作成しています。 100x100 の２つのセルをペアとして横に並べ、横画像(100w x 75h)または縦画像(75w x 100h)を入れています。 この時、横画像だけを入れたペアは、セルの高さが画像と同じ(75)になってしまいます。 常にセルの高さを 100に保つにはどのようにしたらよいのでしょうか。 現在は次のように記述しています。 <TR><!---- 高さ 100 ＯＫ --> <TD width="100" hight="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> <TD width="100" align="center"><IMG src="H_100.jpg" width="75" height="100" border="0"></TD> </TR> <TR><!---- 高さ 75 ＮＧ！！ --> <TD width="100" hight="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> <TD width="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> </TR>
- ベストアンサー
- HTML
- CSSで、画像を左寄せにして全体を中央にする方法
画像5点を左寄せで配置しています。 添付画像のようにブラウザの幅によって段数を変更できるようにしていますが、 どうしても、画像部分がセンタリングされません。 他のサイト等を丸2日かけて調べましたが、どうもうまい事できません。 どなたかご教授くださいませ。 よろしくお願いいたします。 以下、現状のHTMLとCSSです。 ■HTML <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial=1, maximum-scale=1"> <link rel="stylesheet" type="text/css" href="css/style2.css" media="all"> <title>タイトル</title> </head> <body> <header> <p>ヘッダー</p> </header> <div id="contents"> <a href="http://○○○○○○○/001.html"><img src="images/001s.jpg" > <a href="http://○○○○○○○/002.html"><img src="images/002s.jpg" > <a href="http://○○○○○○○/003.html"><img src="images/003s.jpg" > <a href="http://○○○○○○○/004.html"><img src="images/n004s.jpg" > <a href="http://○○○○○○○/005.html"><img src="images/005s.jpg" > </div> <footer> <p>フッター</p> </footer> </body> </html> ■CSS @charset "UTF-8"; *{ margin: 0;padding: 0} a { text-decoration : none} ul, ol { list-style : none} img { vertical-align : top} html { font-family : verdana, sans-serif; font-size : 120%; line-height : 150%; margin : 0; width : 100%; text-align:center; } body { width:100%; text-align:center; } header { width:100%; margin-bottom: 0px; color: #fff; font-size: 20px; height:30px; background : url(../images/back.jpg) } #contents { width:100%; padding : 30px 0 10px; text-align:left; } #contents img { margin-bottom : 24px; } footer { color: #fff; width:100%; font-size: 10px; height:30px; background : url(../images/back.jpg) }
- 締切済み
- CSS
お礼
paddingはmarginと似たものかと思っていましたが、 背景色の指定もできるのですね。 無事できました。 ありがとうございました。 またよろしくお願いします。