下図のように横並びにした画像+テキストをのせたものを、
それを中央寄せにしたいのですが、失敗してしまいます。
lang
1<div class="sample"> 2 <img src="sample1.jpg"><p>txt</p> 3 <img src="sample2.jpg"><p>txt</p> 4 <img src="sample3.jpg"><p>txt</p> 5</div>
lang
1.sample { 2 display: block; 3 margin: 0 auto; 4 width: 645px; 5} 6 7.sample img { 8 width: 200px; 9 margin: 15px; 10} 11 12.sample>img { 13 width: 200px; 14 margin: 15px; 15} 16
どうすればうまくいきますでしょうか?
よろしくお願い致します。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答4件
0
css
1.sample { 2 display: flex; 3 justify-content: center; 4 margin: 0 auto; 5 width: 645px; 6} 7 8.sample .item { 9 flex: none; 10 width: 200px; 11 margin: 5px; 12 text-align: center; 13} 14 15.sample img { 16 width: 200px; 17}
html
1<div class="sample"> 2 <div class="item"><img src="sample1.jpg"><p>txt</p></div> 3 <div class="item"><img src="sample2.jpg"><p>txt</p></div> 4 <div class="item"><img src="sample3.jpg"><p>txt</p></div> 5</div>
margin が 15px だとはみ出るので 5px にしました
投稿2016/08/25 14:04
総合スコア604
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
ベストアンサー
floatの例です。一応、画像が4つ以上あっても大丈夫なようにしています(ResetCSS併用)
css
1<ul class="sample"> 2 <li class="inner"> 3 <img src="sample1.jpg"> 4 <p>txt</p> 5 </li> 6 <li class="inner"> 7 <img src="sample2.jpg"> 8 <p>txt</p> 9 </li> 10 <li class="inner"> 11 <img src="sample3.jpg"> 12 <p>txt</p> 13 </li> 14</ul>
css
1.sample { 2 display: block; 3 margin: 0 auto; 4 width: 630px; 5} 6 7.sample:after { 8 display: block; 9 content: ""; 10 clear: both; 11} 12 13.inner { 14 float: left; 15 width: 200px; 16 text-align: center; 17 margin-left: 15px; 18} 19 20.inner:nth-child(3n+1){ 21 margin-left: 0; 22} 23 24.sample img { 25 width: 200px; 26 height: 200px; 27}
投稿2016/08/31 05:20
総合スコア2092
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
HTML
1<div class="sample"> 2 <div><img src="sample1.jpg"><p>txt</p></div> 3 <div><img src="sample2.jpg"><p>txt</p></div> 4 <div><img src="sample3.jpg"><p>txt</p></div> 5</div>
横に並べたいのは「画像+テキスト」のひとかたまりなので、
上記のように、「画像+テキスト」を一つのブロック内にまとめてあげないと、作りたいデザインは実現できません。
その上で横並びの左右中央揃えを実現する方法は
display:flex、display:inline-block、display:table-cellあたりを使えば
実現できます。どれが最適かは該当部分以外の諸々の条件により変わります。
(固定幅なのかレスポンシブなのかとか、表示サポートの範囲とか)
flexboxの場合のケースは他の方が回答されていますので、
他のケースの場合だけ載せておきます。
CSS
1/*display:inline-blockの場合*/ 2.sample { 3 text-align: center; 4} 5.sample > div { 6 display: inline-block; 7 margin: 0 30px;/*隣との間隔に合わせて調整*/ 8} 9
CSS
1/*display:table-cellの場合*/ 2.sample { 3 display:table; 4 table-layout:fixed;/*セルを均等分割*/ 5 width: 700px; /*.sample自体の横幅を設定*/ 6 margin: 0 auto; /*.sample自体を左右センター揃え*/ 7} 8.sample > div { 9 display: table-cell; /*子divをセル化して横並び*/ 10 text-align: center; 11 vertical-align: top; 12}
投稿2016/08/31 03:43
総合スコア3763
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
CSS
1.flex-container { 2 display: -webkit-flex; 3 display: flex; 4 -webkit-flex-wrap: wrap; 5 flex-wrap: wrap; 6 -webkit-justify-content: space-around; 7 justify-content: space-around; 8} 9.flex-container > figure { 10 text-align: center; 11} 12.flex-container > figure > img { 13 display: block; 14}
HTML
1<div class="flex-container"> 2 <figure> 3 <img src="https://placehold.jp/24/cc9999/993333/100x100.png" alt=""> 4 <figcaption>text</figcaption> 5 </figure> 6 <figure> 7 <img src="https://placehold.jp/24/cc9999/993333/100x100.png" alt=""> 8 <figcaption>text</figcaption> 9 </figure> 10 <figure> 11 <img src="https://placehold.jp/24/cc9999/993333/100x100.png" alt=""> 12 <figcaption>text</figcaption> 13 </figure> 14</div> 15```**動くサンプル:**[https://jsfiddle.net/uwcm3zgy/](https://jsfiddle.net/uwcm3zgy/) 16 17【これからのCSSレイアウトはFlexboxで決まり! | Webクリエイターボックス】 18[http://www.webcreatorbox.com/tech/flexbox/](http://www.webcreatorbox.com/tech/flexbox/) 19 20【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】 21[http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html](http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html) 22 23【CSS3のFlexboxを基本から理解して、使い倒そう! | 株式会社LIG】 24[http://liginc.co.jp/web/html-css/css/21024](http://liginc.co.jp/web/html-css/css/21024)
投稿2016/08/25 14:07
総合スコア69366
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。