CSS文字と写真を横並びにして中央配置

2023/11/02 15:36

このQ&Aのポイント

お店のホームページで、CSSを使用して文字と写真を横並びに配置し、中央に配置したいのですが方法がわかりません。
フッターに伸縮するレスポンシブな配置を作成して、左には住所を文字で記載し、右には地図の画像を配置したいです。
要素を横並びにすることはできましたが、中央配置する方法がわかりません。また、ブラウザーのサイズを縮小した際に要素が縦並びになってしまいます。解決方法を教えてください。

ベストアンサー

CSS 文字と写真を横並びにして中央配置

2015/05/21 12:48

お店のホームページを作っていてどうしてもできない箇所があるので質問させて頂きます。レスポンシブの伸縮するフッターに、左に住所を文字で記載して右に地図の画像を配置したものを、フッターの中央に配置したいと考えています。 <div style="float:left; margin-right:20px; width:220px;"> 東京都.......<BR> 03-.......<BR> </div> <div style="float:left; width:220px;"> <img src="../map.jpg" /> </div> こんな感じで、２つの要素を横並びにはできたのですがどうしても中央配置にできません。。。さらに、ブラウザーの横サイズを小さくしていくと要素が縦並び(上：住所　下：地図)になって中央配置にしたいと考えています。とても簡単そうなのですが、まる２日間いろいろ試して、どうしても解決できないのでどなたかアドバイス頂けると幸いです。よろしくお願いいたします。

BONO33
お礼率46% (6/13)

CSS
回答数1
ありがとう数2

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

質問者が選んだベストアンサー

ベストアンサー

tkmojo
ベストアンサー率50% (105/207)

2015/05/21 18:53 回答No.1

こういう感じでどうでしょうか。 <div style="display:table;"> <div style="margin-right:20px; width:220px; display:table-cell; vertical-align:middle;"> 東京都.......<BR> 03-.......<BR> </div> <div style="width:220px; display:table-cell;"> <img src="../map.jpg" /> </div> </div> 基本的にhtml+cssというのは、テーブルのセル内を除き、縦方向の中央寄せが出来る仕様ではありません。（特にプレーンテキストがある場合）無理矢理できなくはない場合も多いですが、結構めんどくさいんですよね。今回は、display:table-cell;を使って疑似的にテーブルの様な表示方法にさせた上でvertical-align:middle;で縦の中央配置を行いました。 floatは不要なので削除してます。 ※display:table-cell;はIE6以下には無効なので注意 > ブラウザーの横サイズを小さくしていくと > 要素が縦並び(上：住所　下：地図)になって中央配置にしたいと考えています。これはメディアクエリを使用して、指定した横幅以下になった場合にdisplay:table-cell;とdisplay:table;をdisplay:block;で打ち消した上で、 width:auto;でも入れてtext-align:center;を指定すればOKでしょう。また、恐らくは質問しやすいようにタグに直接cssを書いてるんだと思いますが、外部ファイルでやってくださいね。レスポンシブはインラインスタイルだけでは実現しません。

質問者

お礼 2015/05/22 04:12

回答して頂きましてありがとうございました。無事、うまく表示することができました！これから勉強して、CSSが思うように記述できるようになれたらと思います。ありがとうございました。

関連するQ&A

HTMLのCSS(float)の設定がよくわかりません
HTMLのCSS(float)の設定がよくわかりません画像のように各配置はうまく表示されているのですが footerのCSSを #footer { width: 100%; float: left; clear: both; } と表記するとwrapperのCSSで表記した外枠のボーダーが footerの前で切、footerの左横に1px～2pxの隙間ができてしまうのですが、その理由をわかる方いらっしゃいますか。宜しくお願い致します。 footerの表記を #footer { width: 100%; clear: both; } とすると、ボーダーも1pxの隙間もなく正常に表示されます。宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #000; border-left-color: #000; } #container { overflow: hidden; } #left { float: left; } #right { float: left; } #footer { width: 100%; float: left; clear: both; } わかる方いらっしゃいましたら宜しくお願い致します。
- ベストアンサー
- HTML
CSSでフローとした際の親要素の高さ
CSSでfloatしたものって、親要素のheightに反映されません？ただ親要素に背景があって、反映されないと凄く困る感じで・・・。それってどうやって回避すればいいでしょうか？取りあえず <div style="width:750px;background:url(mainback.gif)"> <div style="float:left;width:300px;">左側</div> <div style="float:right;width:450px;">右側</div> <br style="clear:both;"> </div> のように、<br style="clear:both;">みたいにして取逃げたんですが、そもそも無意味なbrを入れるのもどうかと思うし。文法的にもbrにclearって微妙な気もするし、なにか良い逃げ方ってないでしょうか？？ご存知の方、宜しくお願いいたします。
- ベストアンサー
- HTML
画面の中央に配置しようとすると、レイアウトが崩れてしまいます（泣）
画面の中央に配置しようとすると、レイアウトが崩れてしまいます（泣） ajaxを使用した住所自動入力フォームをあるファイルに作ったのですが、それをコピーしてもう一つのファイルにペーストし、floatでフォームを横並び配置にするところまではうまく出来たのですが、それを画面の中央配置にプロパティでしようとして、ドリームウィーバー上ではちゃんとフォームは横並びに配置されているのですが、アップロードしてブラウザで確認した時になぜか縦配置になってしまっています。どうすればきちんとフォームが横並びになって画面の中央配置にできるでしょうか？ <style type="text/css"> div.exampleB table { width: 280px; margin-right: 10px; float: left; } .exampleB { position: absolute; left: 50%; width: 630px; height: 100%; margin-left: -315px; </style> <div class="exampleB"> <div align="center"> <table width="315" height="449" border="2" align="center" cellspacing="0" bordercolor="#006633"> <tr> <td width="315" height="449"><div align="center"><span class="style13"><span class="style15"><a href="/link/moto2.html" target="_blank"></a><img src="../image/dt_022_03.gif" alt="引越元のイラスト" width="290" height="200" /></span></span></div><p align="center"><span class="style13"><span class="style119">＜引越<strong>元</strong>住所＞</span></span><span class="style119"><br /> 郵便番号：（省略）都道府県：（省略）市区町村：（省略）町域(大字)：（省略）丁目番地：（省略）　建物名～号室:（省略） </span></p></td> </tr> </table> <table width="316" height="449" border="2" cellspacing="0" bordercolor="#006633"> <tr cellspacing="0"> <td width="301" height="449"><div align="center" class="style30"><img src="../image/dt_023_03.gif" alt="引越先のイラスト" width="290" height="200" /><br /> <p align="left"><span class="style123"><span class="style15"><span class="style118">＜引越<strong>先</strong>住所＞</span></span><span class="style118"><br /> 郵便番号：（省略）都道府県：（省略）市区町村：（省略）町域(大字)：（省略）丁目番地：（省略）　建物名～号室:（省略） </span></p> </div></td> </tr> </table> </div> </div>
- ベストアンサー
- 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
firefoxでdivタグの体裁崩れ
お世話になります。以下のソースを IEで見るとリスト１、リスト２は同じ内容が表示されます FireFoxで見るとリスト２のlist3が左側につめられて表示されます。・これはIE or FireFoxのバグになるのでしょうか？・IEと同じようにFireFoxで表示したいのですが出来ますでしょうか？申し訳ありませんがご教授よろしくお願いいたします。 <html> <title>DIVタグテスト</title> <body> DIVタグテスト<br> <br> リスト１ <div style="width:300px;"> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list1</div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list2</div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list3</div> </div> </div> </div> <br> <br> リスト２ <div style="width:300px;"> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list1</div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div></div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list3</div> </div> </div> </div> </body> </html>
- ベストアンサー
- HTML
perlで3カラムにしたい (css)
perlでcgiのアンケートのページを作っていますが、ページの最上部をヘッダー、ページの両端にメニューや広告、中央にコンテンツを配置する3カラム（三段組み）、最下部をフッターにしたいと考えています。ページ幅 755pxでセンタリング、両端のメニュー、コンテンツともに幅固定で、以下のようなcssファイルを作りましたが、cgiのページを見ると、cssファイルの設定がうまく反映されません。どうすれば良いのか、ぜひ御指導、アドバイス頂けると助かります。ｍ（＿　＿）ｍ当方初心者のため、もし以下のcssファイルの書き方に間違えがありましたら、ご指摘ください。よろしくお願い致します。 ----------------------------- <HTML> <BODY> <div id="wrapper"> <div id="header"> ヘッダー部分 </div> <div id="main"> <div id="menu"> メニュー部分 </div> <div id="contents"> コンテンツ部分 </div> <div id="affiriate"> アフィリエイト部分 </div> </div> <div id="footer"> フッター部分 </div> * { margin: 0; padding: 0; } #wrapper { width: 755px; margin: 0 auto; /* 幅固定（755px）でセンタリングします。*/ } #header { width: 755px; height: 50px; } #main { width: 755px; /* 両端ブロックとコンテンツを囲んでいるセレクタです。*/ } #menu { float: left; width: 150px; /* floatに、width 指定は必須です。*/ } #contents { float: left; width: 505px; #affiliate { float: left; width: 150px; } #footer { clear: both; /* float をクリアしています。*/ width: 755px; height: 50px; } #menu ul { list-style: none; } </div> </BODY> </HTML>
- ベストアンサー
- CSS
CSSで文字が流れ込んでしまいます
CSS勉強中ですが、このように組んだらFireFoxで見ると左のコンテンツより右のテキストを増やした場合に左の<div id="leftside">の領域まで文字が行ってしまいます。 clear: bothを入れるのかなぁと思いつつ、色々なところに入れてみたのですが、変らなくて・・・。どのようにしたらいいでしょうか。 body { margin-top: 0; background: #30689D; text-align: center; } #header{ width: 760px; margin-left: auto; 　　　margin-right: auto; background: #E2E2E2; } #container{ width: 760px; margin-left: auto; 　　　margin-right: auto; background: #FFFFFF; text-align: left; } #wrap { padding: 0px; } #leftside{ width: 170px; float: left; background: #FFFFFF; } #photo{ width: 570px; float: left; margin-left: 10px background: #FFFFFF; } #news{ width: 570px; margin-left: 10px background: #FFFFFF; } #footer{ width: 760px; margin-left: auto; margin-right: auto; padding: 10px 0px 10px 0px; background: #E2E2E2; text-align: right; } p { margin: 0; padding: 0; } -----HTML <div id="header">ヘッド</div> <div id="container"> <div id="wrap"> <div id="leftside"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div> <div id="photo"> <p>写真を入れたいところ</p> </div> <div id="news"> <p>ここの文字をたくさん入れて下に増えるとと左に文字が流れ込んでしまいます。</p> <div id="footer">フッターく</div>
- ベストアンサー
- HTML
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
CSS　＜div＞の入れ子が反映されない
＜div＞要素を使ってレイアウトを考えています。いくつかのBOXを一まとめにして中央表示にしようと思うのですが一まとめにする為のdiv要素が全く反映されません。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ * { padding : 0px ; margin : 0px ; } #kihon { background:#ff0000; width : 752px ; margin : 0 auto ;} #header { width : 750px ; background: #ff00ff ; } #main { float: left; width: 500px; background: #0000ff ; } #menu { float: left; width: 250px; background: #00ff00 ; } #footer { clear : both ; width : 750px ; background: #000000 ; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <body> <div id="kihon"> <div id="header">aaa</div> <div id="main">aaa</div> <div id="menu">aaa</div> <div id="footer">aaa</div> </div> </body> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝上の記述で、<div id="kihon">が全く反映しません。一応一まとまりにはなるのですが、左上に固まって表示されるだけです。自分でも色々調べたのですが調べ方が悪いのか原因が全く分かりません。知り合いにHP作成の知識がある人がおらず相談が出来ないのでこちらでお力を貸して頂きたく投稿させていただきました。よろしくお願いいたします。
- ベストアンサー
- HTML
ホームページのブロック配置　Float
Float left のブロックの右に別のブロックを配置したいのですが float right 指定しても回り込んでくれません。一度は上手くいったようにみえたのですが。原因と注意点をお教え下さい。　--------------------------------------------------------------------------- | header | |--------------------------------------------------------------------------- | dspbody (menuとtopを含む) | | ------------------------------------------------------------------------- | | menu | top | |--------------------------------------------------------------------------- | footer | ---------------------------------------------------------------------------- 【テスト中のスタイルシート】 * { margin:0; padding:0; } body { /* background-color:#ffffff; *//*内容全体の背景色*/ text-align:left; /*テキストの配置を左揃えにする*/ } div#pagebody { width:1000px; margin:0 auto; /*内容全体をセンタリング*/ text-align:left; /*テキストの配置を左揃えにする*/ } div#header { height:136px; /*背景画像のサイズに合わせてボックスの高さを指定*/ text-align:center; /*テキスト・画像の配置を中央揃えにする*/ background-image: url(img/FF054_change.png); background-repeat: repeat-x; } div#dspbody { width:1000px; height:800px; background-color: #999999; } div#menu { width:152px; height:800px; margin:0; 　　　　 float:left; /*内容全体を左に配置*/ text-align:left; /*テキストの配置を左揃えにする*/ /* background-color: "saddlebrown"; */ background-image: url(img/FF085_change.png); /* background-repeat: repeat-y; */ } div#top { /* width:700px; height:600px; */ float:right; text-align:center; /*テキストの配置を中央揃えにする*/ font-size: 9pt; background-color: #ccffcc; } div#top table { margin: auto; /*テーブルの配置を中央揃えにする*/ } div#footer { clear:both; text-align:center; /*テキストの配置を中央揃えにする*/ } a:link { color: yellow} a:visited { color: yellowgreen}
- ベストアンサー
- その他([技術者向] コンピューター)