質問編集履歴

4

CSSを編集

2017/03/28 09:14

投稿

penguin520
penguin520

スコア345

test CHANGED
File without changes
test CHANGED
@@ -80,13 +80,13 @@
80
80
 
81
81
  #body{
82
82
 
83
- width: 1000px;
83
+ width: 1000px;
84
-
84
+
85
- text-align: center;
85
+ text-align: center;
86
-
86
+
87
- margin-left:auto;margin-right:auto;
87
+ margin-left:auto;margin-right:auto;
88
-
88
+
89
- text-align:left;
89
+ text-align:left;
90
90
 
91
91
  }
92
92
 
@@ -94,116 +94,124 @@
94
94
 
95
95
  #aka{
96
96
 
97
- width: 1000px;
97
+ width: 1000px;
98
-
98
+
99
- height: 300px;
99
+ height: 300px;
100
-
100
+
101
- background-color: #ff0000;
101
+ background-color: #ff0000;
102
-
102
+
103
- text-align: center;
103
+ text-align: center;
104
-
104
+
105
- margin-left:auto;margin-right:auto;
105
+ margin-left:auto;margin-right:auto;
106
+
107
+ display:table-cell;
108
+
109
+ vertical-align: middle;
110
+
111
+ }
112
+
113
+
114
+
115
+ #ao{
116
+
117
+ width: 600px;
118
+
119
+ height: 500px;
120
+
121
+ background-color: #0000ff;
122
+
123
+ text-align: center;
124
+
125
+ margin-left:auto;margin-right:auto;
126
+
127
+ display:table-cell;
128
+
129
+ vertical-align: middle;
130
+
131
+ float:left
132
+
133
+ }
134
+
135
+
136
+
137
+ #midori{
138
+
139
+ width: 400px;
140
+
141
+ height: 500px;
142
+
143
+ background-color: #008000;
144
+
145
+ text-align: center;
146
+
147
+ display:table-cell;
148
+
149
+ vertical-align: middle;
150
+
151
+ margin-left:auto;margin-right:auto;
152
+
153
+ float:right
154
+
155
+ }
156
+
157
+
158
+
159
+ #iro{
160
+
161
+ width: 1000px;
162
+
163
+ height: 300px;
164
+
165
+ background-color: #00bfff;
166
+
167
+ text-align: center;
168
+
169
+ margin-left:auto;margin-right:auto;
170
+
171
+ display:table-cell;
172
+
173
+ vertical-align: middle;
174
+
175
+ clear: right;
176
+
177
+ clear: left;
178
+
179
+ }
180
+
181
+
182
+
183
+ .middle{
184
+
185
+
186
+
187
+ }
188
+
189
+ ```
190
+
191
+
192
+
193
+ ![イメージ説明](9a981038d5deda079a4fb4ff8a3ed4c6.png)
194
+
195
+
196
+
197
+ 上記図のように「赤」「青」と書いてあるテキストを
198
+
199
+ 上下左右の中央にCSSで、そろえようとしましたが、
200
+
201
+ ```CSS
202
+
203
+ float
204
+
205
+ ```
206
+
207
+ を入れると
208
+
209
+ ```CSS
106
210
 
107
211
  display:table-cell;
108
212
 
109
213
  vertical-align: middle;
110
214
 
111
- }
112
-
113
-
114
-
115
- #ao{
116
-
117
- width: 600px;
118
-
119
- height: 500px;
120
-
121
- background-color: #0000ff;
122
-
123
- text-align: center;
124
-
125
- margin-left:auto;margin-right:auto;
126
-
127
- float:left
128
-
129
- }
130
-
131
-
132
-
133
- #midori{
134
-
135
- width: 400px;
136
-
137
- height: 500px;
138
-
139
- background-color: #008000;
140
-
141
- text-align: center;
142
-
143
- margin-left:auto;margin-right:auto;
144
-
145
- float:right
146
-
147
- }
148
-
149
-
150
-
151
- #iro{
152
-
153
- width: 1000px;
154
-
155
- height: 300px;
156
-
157
- background-color: #00bfff;
158
-
159
- text-align: center;
160
-
161
- margin-left:auto;margin-right:auto;
162
-
163
- display:table-cell;
164
-
165
- vertical-align: middle;
166
-
167
- clear: right;
168
-
169
- clear: left;
170
-
171
- }
172
-
173
-
174
-
175
- .middle{
176
-
177
-
178
-
179
- }
180
-
181
- ```
182
-
183
-
184
-
185
- ![イメージ説明](9a981038d5deda079a4fb4ff8a3ed4c6.png)
186
-
187
-
188
-
189
- 上記図のように「赤」「青」と書いてあるテキストを
190
-
191
- 上下左右の中央にCSSで、そろえようとしましたが、
192
-
193
- ```CSS
194
-
195
- float
196
-
197
- ```
198
-
199
- を入れると
200
-
201
- ```CSS
202
-
203
- display:table-cell;
204
-
205
- vertical-align: middle;
206
-
207
215
  ```
208
216
 
209
217
  を入力しても高さがうまく揃いません。

3

質問の日本語がおかしかったので微修正

2017/03/28 09:14

投稿

penguin520
penguin520

スコア345

test CHANGED
File without changes
test CHANGED
@@ -214,7 +214,7 @@
214
214
 
215
215
 
216
216
 
217
- いまのソースだと、下の図にように
217
+ 下の図にように
218
218
 
219
219
  うまく「青」と「緑」が
220
220
 

2

イメージ図を追加

2017/03/28 09:04

投稿

penguin520
penguin520

スコア345

test CHANGED
File without changes
test CHANGED
@@ -211,3 +211,13 @@
211
211
  いろいろな方法があると思いますが、
212
212
 
213
213
  どうすれば、よいでしょうか。
214
+
215
+
216
+
217
+ いまのソースだと、下の図にように
218
+
219
+ うまく「青」と「緑」が
220
+
221
+ 中央の高さに表示されません。
222
+
223
+ ![イメージ説明](07ab56858cc90fbeb8afa7c5974c10f9.png)

1

質問の日本語がおかしかったので訂正 質問のタイトルを変更

2017/03/28 08:57

投稿

penguin520
penguin520

スコア345

test CHANGED
@@ -1 +1 @@
1
- <div></div>の中の文字の位置揃えたい
1
+ {float:}を入力した<div>要素の中の文字の高さ変更する方法
test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  <head>
10
10
 
11
- <title>5日への課題</title>
11
+ <title>Title</title>
12
12
 
13
13
  <meta charset="UTF-8">
14
14
 
@@ -211,15 +211,3 @@
211
211
  いろいろな方法があると思いますが、
212
212
 
213
213
  どうすれば、よいでしょうか。
214
-
215
-
216
-
217
- イメージとしては、下の図のように
218
-
219
- しようとしています。
220
-
221
- よろしくお願いします。
222
-
223
-
224
-
225
- ![![イメージ説明](f4a98c363b8b3e846ebf1b93ce5768ee.png)](130abc695f238c302ea7f5cf150a042d.png)