質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

22177閲覧

横並びにした画像+テキストを 中央寄せ

hpd

総合スコア32

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2016/08/25 13:22

下図のように横並びにした画像+テキストをのせたものを、
それを中央寄せにしたいのですが、失敗してしまいます。
イメージ説明

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ページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pi-chan

2016/08/25 13:32

cssだけじゃ分かりませんよね~ 対応する部分のhtmlも記載してみては?
guest

回答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

lazex

総合スコア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

yamato_hikawa

総合スコア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:flexdisplay:inline-blockdisplay: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

aKusano

総合スコア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

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問