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

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

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

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

CSS

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

Q&A

解決済

1回答

6241閲覧

縦2列に並んだ画像を中央寄せしたい

hpd

総合スコア32

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/02/09 15:20

編集2017/02/10 02:51

2列の並んだ画像を中央寄せしたいです。
divでくくって

display:inline
text-alignをcenterにしたり、
display:block
margin:0 auto;にしたりしてみても、

左にぴったりと寄ってしまいます。
どうするとうまくいきますでしょうか?
よろしくお願い致します。

センター揃えに成功しました、ありがとうございました。
現行次の画像のようになっておりまして、
画像の上部を揃えたいのですがどうするとよいでしょうか?
左列を上で揃えたい

HTML

1 <div class="works_bottom"> 2 <div class="left"> 3 <img src="sample.jpg"> 4 <img src="sample.jpg"> 5 <img src="sample.jpg"> 6 <img src="sample.jpg"> 7 <img src="sample.jpg"> 8 </div> 9 10 <div class="right"> 11 <img src="sample.jpg"> 12 <img src="sample.jpg"> 13 <img src="sample.jpg"> 14 <img src="sample.jpg"> 15 <img src="sample.jpg"> 16 </div> 17 </div>

CSS

1 2 .works_bottom { 3 display: inline; 4 text-align: center; 5 } 6 7 .works_bottom img{ 8 display: block; 9 width: 420px; 10 padding: 10px; 11 margin-left: 170px; 12 } 13 14 .img-left > img { 15 margin-left: 0; 16 } 17 18 .img-left { 19 float: left; 20 } 21 22 .img-right{ 23 float:left; 24 } 25 26 .img-right img{ 27 margin-left:60px; 28 }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

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

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

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

回答1

0

ベストアンサー

2列にするんですね、失礼しました。
他に設定がなければ

.works_bottom { display: flex; justify-content: center; align-items: center; } .left{ width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .right{ width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; }

デフォルトのCSSがあってちょっとずれる場合はリセットCSSなどで。

左右の画像をくっつけたい場合は

.works_bottom { width: 100%; display: flex; justify-content: center; align-items: center; } .left{ width: 50%; display: flex; flex-direction:column; } .right{ width: 50%; display: flex; flex-direction: column; } .left img{ margin-left: auto; } .works_bottom img{ /*display: block;*/ width: 420px; padding: 10px; /*margin-left: 170px;*/ }

こんな感じでも。

投稿2017/02/09 22:11

編集2017/02/10 02:25
kyunta

総合スコア350

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

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

hpd

2017/02/10 02:52

ありがとうございます!とてもうまくいきました。 追記画像画像のように高さを揃えたいのですが、どうするとよいでしょう?
kyunta

2017/02/10 03:19

.works_bottom { width: 100%; display: flex; justify-content: center; align-items: baseline; } こんな感じでも。
hpd

2017/02/10 03:31

出来ました!ありがとうございました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問