質問編集履歴

4

詳細な説明を追記

2022/05/19 06:10

投稿

TOM830
TOM830

スコア15

test CHANGED
File without changes
test CHANGED
@@ -1,5 +1,10 @@
1
- CSSのbox要素内に配置した横並び画像で、要素幅100%に対してのwidthを縮小すると左寄せになってしまいます。
1
+ CSSのbox要素内に配置した横並び画像で、要素幅100%に対してのwidthを縮小すると両要素内とも左寄せになってしまいます。
2
+
3
+ [□ ][□ ]
4
+ のように配置されているものを
5
+ [ □][□ ]
2
- これを両要素も横並びを維持したまま**左右中央寄せ**にしたいです。(1枚目の右辺と2枚目の左辺が隣り合った上で、bodyの中心に隣り合った辺が来ている想定)
6
+ いう形にしたいです。
7
+
3
8
  以下がCSSとHTMLです。
4
9
 
5
10
  ```CSS

3

分かりにくい文章を修正

2022/05/19 04:55

投稿

TOM830
TOM830

スコア15

test CHANGED
File without changes
test CHANGED
@@ -1,5 +1,5 @@
1
1
  CSSのbox要素内に配置した横並び画像で、要素幅100%に対してのwidthを縮小すると左寄せになってしまいます。
2
- これを両要素とも横並びを維持たまま**左右中央寄せ**にしたいです。
2
+ これを両要素とも横並びを維持たまま**左右中央寄せ**にしたいです。(1枚目の右辺と2枚目の左辺が隣り合った上で、bodyの中心に隣り合った辺が来ている想定)
3
3
  以下がCSSとHTMLです。
4
4
 
5
5
  ```CSS

2

コード内の不足点を編集

2022/05/19 04:53

投稿

TOM830
TOM830

スコア15

test CHANGED
File without changes
test CHANGED
@@ -1,5 +1,5 @@
1
1
  CSSのbox要素内に配置した横並び画像で、要素幅100%に対してのwidthを縮小すると左寄せになってしまいます。
2
- これを**中央寄せ**にしたいです。
2
+ これを両要素とも横並びを維持たまま**左右中央寄せ**にしたいです。
3
3
  以下がCSSとHTMLです。
4
4
 
5
5
  ```CSS
@@ -11,7 +11,7 @@
11
11
  display: flex;
12
12
  align-items: flex-end;
13
13
  }
14
- .box {
14
+ .box > img {
15
15
  width: 50%;
16
16
  margin: 2px;
17
17
  }
@@ -28,5 +28,5 @@
28
28
  </div>
29
29
  </div>
30
30
  ```
31
- 画像同士が隙間なく接するのを避けるために **margin: 2px;** を入れています。
31
+ 正常に表示された場合、画像同士が隙間なく接するのを避けるために **margin: 2px;** を入れています。また、画像サイズは1053*1504の縦長のものが2枚です。
32
32
  よろしくお願いします。

1

変更したい点を具体的に記述していなかったので修正

2022/05/19 03:56

投稿

TOM830
TOM830

スコア15

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,5 @@
1
1
  CSSのbox要素内に配置した横並び画像で、要素幅100%に対してのwidthを縮小すると左寄せになってしまいます。
2
+ これを**中央寄せ**にしたいです。
2
3
  以下がCSSとHTMLです。
3
4
 
4
5
  ```CSS