- ベストアンサー
ひとつの枠（divとかtable）の中に両端から均等に空白を開けて画像を配置する方法
takumana20の回答
- takumana20
- ベストアンサー率46% (6/13)
全部の img に class しなくても td img { margin: 5px 30px;} とかでも出来ますし 並べたところで１枚の画像にしちゃうとかｗ
noname#100277
関連するQ&A
- div内のテキストと画像の配置について
お世話になります。 現在CSSを勉強中なのですが、参考サイトを見てテーブルを使わずにdivとC SSで同じようなレイアウトが可能と知り、試してみたのですが、div内に配 置したテキストや画像の表示が思い通りになりません。 ソースは以下のような形です。 【HTMLの内容】 <div class="main"> <div class="main-menu">一行目テキスト<br />二行目テキスト</div> <div class="main-content"><img src="xxx.jpg"></div> </div> 【CSSの内容】 div.main { width: 500px; } div.main-menu { float: left; width: 300px; } div.main-content { float: left; } 上記に、以下の指定を追加したいと考えています。 1)main-menu内の「二行目テキスト」だけを右寄せにする。 2)main-content内の画像が常に縦位置の中央に表示されるようにする。 （main-menu内のテキストが複数行になり、divの縦幅が大きくなった場合に 画像も縦幅に合わせ中央に表示したいです。） この場合、どのような方法があるでしょうか？ 勉強不足で大変恐縮ですが、よろしくお願いします。
- ベストアンサー
- HTML
- DIVタグの背景に画像を配置できない
<!DOCTYPE HTML> <html lang="jp"> <head> <meta charset="UTF-8"> <title>組織図</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> #figure_main { font-size:12px; margin-top:10px; margin-left:10px; width:510px; } #figure_main div { margin:0px; padding:0px; } #figure_main ul { margin:0px; list-style-type: none; width:510px; padding: 0px; } #figure_main li { float:left; text-align:center; background-color:#FFF; border:solid 1px #ccc; padding:5px; width:110px; display:block; margin-right: 40px; } #figure_main div.blank1 { float:left; background-color: #FFF; width:510px; height:10px; } #figure_main li.list_low { margin-left:212px; } #figure_main li.list_hei { margin-left:375px; } #figure_main li.list_l { margin-right:90px; } #figure_main li.list_r { width:120px; margin-right:0; } #figure_main div.list_lineT { background:url(images/listlineT.gif); } </style> </head> <body> <div id="figure_main"> <div class="list_lineT"> <ul> <li class="list_l">営業局</li> <li>人材派遣部</li> </ul> </div> <div class="blank1"></div> <div> <ul> <li class="list_low">営業推進部</li> <li class="list_r">メディア事業グループ</li> </ul> </div> </div> </body> </html> list_lineTクラスの背景「listlineT.gif」を指定しても表示されません。 パスは間違っていませんが。どこが違うのでしょうか？ 宜しくお願いします。
- ベストアンサー
- HTML
- CSSで画像を均等配置
widthが800pxのブロック内で同じ大きさの４つの画像を横に一定感覚で配置したいです。 普段は各画像にmarginを設定して均等に見えるようにしているのですが、 他に何かスマートな方法はありますでしょうか？ 独自拡張、テーブルの使用以外の方法でお願いいたします。
- ベストアンサー
- CSS
- h1を親要素の縦中央、画像の横に配置する方法
h1を親要素の縦中央、画像の横に配置する方法を探しています。 <header> <a href="#" title=""><img class="logo" src="img/logo@1x.png" title="logo"></a> <h1 class="title">h1.title</h1> </header> .header-container{height:200px;margin:0;} .logo{float:left;} .title{display:inline-block;margin:0;} どうすればよいでしょう？
- ベストアンサー
- CSS
- <ul><li>で画像が均等配置せずレイアウト崩れ
<ul><li>で画像が均等配置せずレイアウト崩れしてしまいます。 いつもお世話になります。 添付画像のように、#rightmenuのul#resultList内で<li>を使用して110pxの画像を5つ均等に配置させそれぞれの隙間には10pxの空間を空けて配置したいと考えています。 左から4つの画像は#resultList li {}でpadding-right:10px;で余白を作り、5番目の画像は逆に余白がないように#resultList li.mustright 指定でpadding-right:none;設定です。 ところがそんな設定していないのに、何故か間には20pxほどの空白ができ、そのため一番右端の画像がレイアウト崩れして下段に落ちてしまいます。CSSもしくはHTMLの記述のどこがいけないのでしょうか？どうか教えてください。ちなみに並べたい画像はクリックするとthickboxで大きな画像が表示できるようにしたいと考えています。 ●HTML <div id="rightmenu"> <div id="rightbox-inside">←背景にコンテンツの外枠となる画像の上部表示用 <div id="rightbox-inside-txt"> <p class="title">タイトル</p> <p class="standard-title">コンテンツ内容</p> <p class="standard"> <ul id="resultList"> <li><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li> <li><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li> <li><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li> <li><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li> <li class="mustright"><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li> </ul> </p> </div> <div style="clear:both; "></div> <div id="rightbox-buttom"><img src="images/rightbox-buttom.jpg" alt="枠">←背景にコンテンツの外枠となる画像の下部表示用 </div> </div> </div> ●CSS #rightmenu { width:645px; float:right; padding-top:20px; background:url(../images/rightbox-top.png) no-repeat; } #rightbox-inside { background:url(../images/rightbox-inside.png) repeat-y; } #resultList { overflow:hidden; margin:0 25px 0 30px; padding:0; list-style-type:none; } #resultList li { display:inline; float:left; margin:0; padding-right:10px; } #resultList li.mustright { float:right; padding-right:none; } #resultList li a { display:block; } #resultList li a img { display:block; width:110px; height:100px; border:0; } #rightbox-buttom { clear:both; }
- ベストアンサー
- CSS
- イラレで画像を四角い枠に大量配置する方法
イラストレータで、四角い枠を作って、その中にたくさんの画像を入れる作業をしないといけません。 画像のサイズはばらばらですが、四角い枠は一定の大きさです。 一つずつサイズを変更して入れていましたが、時間がかかります。 そこで、一定の枠内にばらばらのサイズの画像を効率よく入れる方法を教えていただけますでしょうか。 調べたところ、スクリプトを使うことでそのようなことができるそうですが、他に方法があればお願いします。 バージョンはCS2です。
- HTML(レスポンシブ)画像の均等方法
レスポンシブ機能による、３枚の画像の間隔を均等にする方法を教えて下さい。 <section id="link_down" class="clearfix"> <h4>Web Site Link</h4> <figure class="link"><a href="#"><img src="img/icon_4.png" alt="#"></a><figcaption>example</figcaption></figure> <figure class="link"><a href="#"><img src="img/icon_5.png" alt="#"></a><figcaption>example</figcaption></figure> <figure class="link"><a href="#"><img src="img/icon_6.png" alt="#"></a><figcaption>example</figcaption></figure> </section><!--contact end--> コードはこちらです。 画像サイズは固定でお願い致します。 ブレイクポイントは600pxです。（600px以上で横並びに均等にします) marginやpaddingを%で設定したのですが、700pxまでは均等なのですが、1000以上となると、 左寄りになって均等になりません。 よろしくお願い致します。
- 締切済み
- 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を使えばできるのでしょうか？ 色々と勉強しながらやっていますがまだまだ初心者で、どうにも知識が足りません。 どなたか解決方法を教えて下さい。 よろしくお願いします！
- ベストアンサー
- HTML
- photoshopで画像を均等に並べる方法
タイトルの通り画像を均等に並べたいですが、やり方がわかりません。そもそもこんな機能はないのでしょうか？ 自分がやりたいのはオリジナルカウンタを作るのですが、例えば０～９の数字を、200ピクセルの中で均等に並べたいということです。（1つの画像に20ピクセルずつといった感じです） よろしくお願い致します。
- ベストアンサー
- グラフィックソフト