teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップHTMLに関する質問縦2列に並んだ画像を中央寄せしたい

編集履歴

回答編集履歴

3

追加

2017/02/10 02:25

投稿

kyunta
kyunta

スコア350

answer CHANGED
@@ -52,7 +52,7 @@
52
52
  }
53
53
  .works_bottom img{
54
54
  /*display: block;*/
55
- width: 50px;
55
+ width: 420px;
56
56
  padding: 10px;
57
57
  /*margin-left: 170px;*/
58
58
  }

2

追加

2017/02/10 02:25

投稿

kyunta
kyunta

スコア350

answer CHANGED
@@ -26,4 +26,36 @@
26
26
 
27
27
  ```
28
28
 
29
- デフォルトのCSSがあってちょっとずれる場合はリセットCSSなどで。
29
+ デフォルトのCSSがあってちょっとずれる場合はリセットCSSなどで。
30
+
31
+ 左右の画像をくっつけたい場合は
32
+
33
+ ```ここに言語を入力
34
+ .works_bottom {
35
+ width: 100%;
36
+ display: flex;
37
+ justify-content: center;
38
+ align-items: center;
39
+ }
40
+ .left{
41
+ width: 50%;
42
+ display: flex;
43
+ flex-direction:column;
44
+ }
45
+ .right{
46
+ width: 50%;
47
+ display: flex;
48
+ flex-direction: column;
49
+ }
50
+ .left img{
51
+ margin-left: auto;
52
+ }
53
+ .works_bottom img{
54
+ /*display: block;*/
55
+ width: 50px;
56
+ padding: 10px;
57
+ /*margin-left: 170px;*/
58
+ }
59
+ ```
60
+
61
+ こんな感じでも。

1

修正

2017/02/10 02:22

投稿

kyunta
kyunta

スコア350

answer CHANGED
@@ -1,14 +1,29 @@
1
+ 2列にするんですね、失礼しました。
1
2
  他に設定がなければ
2
3
 
3
- ```ここに言語を入力
4
+ ```ここに言語を入力
4
- <style media="screen">
5
- .left, .right{
5
+ .works_bottom {
6
- display: flex;
6
+ display: flex;
7
+ justify-content: center;
8
+ align-items: center;
9
+ }
10
+ .left{
11
+ width: 50%;
12
+ display: flex;
7
- flex-direction: column;
13
+ flex-direction: column;
8
- justify-content: center;
14
+ justify-content: center;
9
- align-items: center;
15
+ align-items: center;
16
+
10
- }
17
+ }
18
+ .right{
19
+ width: 50%;
20
+ display: flex;
21
+ flex-direction: column;
22
+ justify-content: center;
11
- </style>
23
+ align-items: center;
24
+
25
+ }
26
+
12
27
  ```
13
28
 
14
29
  デフォルトのCSSがあってちょっとずれる場合はリセットCSSなどで。