質問編集履歴
4
CSSを編集
test
CHANGED
File without changes
|
test
CHANGED
@@ -80,13 +80,13 @@
|
|
80
80
|
|
81
81
|
#body{
|
82
82
|
|
83
|
-
|
83
|
+
width: 1000px;
|
84
|
-
|
84
|
+
|
85
|
-
|
85
|
+
text-align: center;
|
86
|
-
|
86
|
+
|
87
|
-
|
87
|
+
margin-left:auto;margin-right:auto;
|
88
|
-
|
88
|
+
|
89
|
-
|
89
|
+
text-align:left;
|
90
90
|
|
91
91
|
}
|
92
92
|
|
@@ -94,116 +94,124 @@
|
|
94
94
|
|
95
95
|
#aka{
|
96
96
|
|
97
|
-
|
97
|
+
width: 1000px;
|
98
|
-
|
98
|
+
|
99
|
-
|
99
|
+
height: 300px;
|
100
|
-
|
100
|
+
|
101
|
-
|
101
|
+
background-color: #ff0000;
|
102
|
-
|
102
|
+
|
103
|
-
|
103
|
+
text-align: center;
|
104
|
-
|
104
|
+
|
105
|
-
|
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
質問の日本語がおかしかったので微修正
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
イメージ図を追加
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
質問の日本語がおかしかったので訂正 質問のタイトルを変更
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
<div>
|
1
|
+
{float:}を入力した<div>要素の中の文字の高さを変更する方法
|
test
CHANGED
@@ -8,7 +8,7 @@
|
|
8
8
|
|
9
9
|
<head>
|
10
10
|
|
11
|
-
<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)
|