请老师检查，在按钮处存在疑问

请老师检查，在按钮处存在疑问

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TEST1</title>
<link rel="stylesheet" href="CSS/css.css" />
</head>
<body>
<!-- 页面头部 -->
<header>
<div class="header-main">
<!-- 页面logo -->
<div class="logo">
<img src="images/logo.png" alt="" />
</div>
<!-- 页面导航区域 -->
<nav>
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">GALLERY</a></li>
<li><a href="">FACULTY</a></li>
<li><a href="">EVENTS</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
<!-- 页面banner -->
<div class="banner">
<!-- banner图片 -->
<div class="banner-image">
<img src="images/banner3.jpg" alt="" />
</div>
<!-- banner遮罩层 -->
<div class="banner-shadow"></div>
<!-- banner表单 -->
<div class="banner-form">
<form action="">
<input type="text" placeholder="your Name" />
<input type="text" placeholder="your Phone" />
<input type="email" placeholder="your Email" />
<textarea
name=""
id=""
cols="30"
rows="10"
placeholder="write Your Comment Here"
></textarea>
<input type="submit" value="SEND MESSSAGE" />
</form>
</div>
</div>
<!-- 页面主要内容 -->
<section class="content">
<!-- about -->
<div class="about">
<!-- about上半部分 -->
<div class="about-top">
<h3>ABOUT</h3>
<div class="split"></div>
<div class="text">
Lorem Ipsum is simply dummy text of the printing and typesetting<br />
industry. Lorem Ipsum has been the industry's standard dummy
<br />text ever since the 1500s.
</div>
</div>
<!-- about下半部分 -->
<div class="about-bottom">
<h3>
A WORD<br />
ABOUT US
</h3>
<div class="about-bottom-left">
<div class="text">
Praesent dignissim viverra est, sed bibendum ligula congue non.
Sed ac nisl et felis gravida commodo? Suspendisse eget ullamcorper
ipsum. Suspendisse diam amet.
</div>
<input type="button" value="EXPLORE" />
</div>
<img src="images/bb3.jpg" alt="" />
<div class="about-bottom-right">
<div class="top">
<span class="text">70000</span>
<div class="split"></div>
<span class="text">Student</span>
</div>
<div class="bottom">
<span class="text">600</span>
<div class="split"></div>
<span class="text">Faculty</span>
</div>
</div>
</div>
</div>
<!-- 图文混排 -->
<div class="images-and-text">
<div class="image">
<img src="images/b1.jpg" alt="" />
</div>
<div class="text">
<h3>Library</h3>
<div class="text1">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry
</div>
<div class="text2">
Lorem Ipsum has been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book.
</div>
 
<input type="button" value="EXPLORE" />
</div>
<div class="image">
<img src="images/b2.jpg" alt="" />
</div>
<div class="text">
<h3>Library</h3>
<div class="text1">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry
</div>
 
<div class="text2">
Lorem Ipsum has been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book.
</div>
 
<input type="button" value="EXPLORE" />
</div>
<div class="text">
<h3>Library</h3>
<div class="text1">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry
</div>
 
<div class="text2">
Lorem Ipsum has been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book.
</div>
 
<input type="button" value="EXPLORE" />
</div>
<div class="image">
<img src="images/b3.jpg" alt="" />
</div>
<div class="text">
<h3>Library</h3>
<div class="text1">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry
</div>
 
<div class="text2">
Lorem Ipsum has been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book.
</div>
 
<input type="button" value="EXPLORE" />
</div>
<div class="image">
<img src="images/b4.jpg" alt="" />
</div>
</div>
<!-- gallery -->
<div class="gallery">
<!-- gallery上半部分 -->
<div class="gallery-top">
<h3>GALLERY</h3>
<div class="split">分割线</div>
<br />
<div class="text">
Lorem Ipsum is simply dummy text of the printing and typesetting<br />
industry. Lorem Ipsum has been the industry's standard dummy
<br />text ever since the 1500s.
</div>
</div>
<!-- gallery下半部分 -->
<div class="gallery-bottom">
<dl>
<dt><img src="images/03-01.jpg" alt="" /></dt>
<dd>Science Lab</dd>
<br />
<dt><img src="images/03-02.jpg" alt="" /></dt>
<dd>Indoor Stadium</dd>
<br />
<dt><img src="images/03-03.jpg" alt="" /></dt>
<dd>Transportation</dd>
<br />
<dt><img src="images/03-04.jpg" alt="" /></dt>
<dd>Kids Room</dd>
<br />
<dt><img src="images/03-05.jpg" alt="" /></dt>
<dd>Meditation Classes</dd>
<br />
<dt><img src="images/03-06.jpg" alt="" /></dt>
<dd>Kids Play Ground</dd>
<br />
</dl>
</div>
</div>
</section>
<!-- 页脚 -->
<div class="footer">&copy; 2016 imooc.com 京ICP备13046642号</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
header {
background-color: #07cbc9;
}
header .header-main {
width: 1200px;
height: 80px;
margin: 0 auto;
}
header .logo img {
float: left;
height: 48px;
margin: 16px 0;
}
header nav {
/* width: 580px; */
height: 80px;
float: right;
}
header nav ul li {
float: left;
/* width: 80px; */
height: 80px;
line-height: 80px;
text-align: center;
/* margin-right: 20px; */
/* border: 1px solid #000; */
 
font-size: 16px;
}
header nav ul li:last-child {
margin-right: 0;
}
header nav ul li a {
display: block;
/* width: 80px; */
height: 80px;
padding: 0 10px;
color: white;
}
header nav ul li a:hover {
background-color: gold;
}
.banner {
position: relative;
width: 100%;
height: 600px;
}
.banner .banner-image img {
width: 100%;
height: 600px;
}
.banner .banner-shadow {
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 600px;
position: absolute;
top: 0;
left: 0;
}
.banner .banner-form {
/* border: 1px solid red; */
position: absolute;
height: 400px;
top: 0px;
width: 504px;
left: 50%;
margin-left: -252px;
padding: 100px 0;
}
.banner .banner-form form {
text-align: center;
}
.banner .banner-form input {
width: 502px;
height: 38px;
margin-bottom: 20px;
color: #808080;
border: 1px solid #808080;
background: none;
}
.banner .banner-form input:last-child {
width: 200px;
height: 40px;
margin-bottom: 0;
/* margin: 0 auto; */
}
.banner .banner-form textarea {
width: 502px;
height: 108px;
margin-bottom: 20px;
background: none;
}
.content .about {
width: 1201px;
overflow: hidden;
margin: 0 auto;
margin-top: 30px;
}
.content .about .about-top h3:first-child {
font-size: 32px;
text-align: center;
}
.content .about .split {
width: 60px;
height: 3px;
background-color: #07cbc9;
margin: 10px auto;
}
.content .about .about-top .text {
text-align: center;
color: gray;
font-size: 14px;
}
.content .about .about-bottom {
width: 100%;
height: 464px;
padding-top: 30px;
/* background-color: orange; */
position: relative;
}
.content .about .about-bottom h3 {
float: left;
/* margin-right: 172px; */
font-size: 28px;
margin-right: 119px;
}
.content .about .about-bottom-left {
position: absolute;
width: 300px;
padding: 20px;
font-size: 18px;
border: 1px solid gray;
background-color: rgba(255, 255, 255, 0.5);
top: 50%;
margin-top: -110px;
}
.content .about .about-bottom-left input {
background-color: black;
margin-top: 20px;
color: white;
width: 140px;
height: 40px;
text-align: center;
border: none;
}
 
.content .about .about-bottom img {
float: left;
width: 650px;
height: 435px;
}
.content .about-bottom .about-bottom-right {
float: right;
width: 260px;
font-size: 28px;
font-weight: bold;
}
.content .about-bottom .about-bottom-right .top,
.bottom {
border: 1px solid #07cbc9;
text-align: center;
padding: 40px 0;
margin-bottom: 30px;
}
.content .about-bottom .about-bottom-right .text:last-child {
font-size: 16px;
font-weight: normal;
display: block;
}
.content .about-bottom .about-bottom-right .split {
width: 60px;
height: 3px;
background-color: #07cbc9;
margin: 10px auto;
}
.images-and-text {
width: 100%;
height: 760px;
margin: 0 auto;
}
.images-and-text > div {
width: 25%;
height: 380px;
float: left;
}
.images-and-text > div img {
height: 100%;
}
.images-and-text .text {
background-color: #07cbc9;
}
.images-and-text .text h3 {
font-size: 24px;
padding: 20px;
padding-bottom: 30px;
color: white;
}
.images-and-text .text .text1 {
font-size: 16px;
text-align: center;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 20px;
}
.images-and-text .text .text2 {
font-size: 14px;
color: gray;
text-align: center;
margin-bottom: 30px;
}
.images-and-text .text input {
background-color: black;
color: white;
border: none;
text-align: center;
width: 138px;
height: 40px;
line-height: 40px;
display: block;
margin: 0 auto;
}

按钮是行内块元素，为什么不能用text-align：center居中呢
芜湖呼 2022-01-09
源自：浮动与定位   4-10 自由编程
10
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

1回答
好帮手慕慕子 2022-01-09 13:08:44

同学你好，代码中存在的问题，解答如下：老师这里打开，图片与文字内容之间存在空白间隙，如下：

https://img1.sycdn.imooc.com//climg/61da5d1009f1c79019200768.jpg

建议：图片设置宽度百分百，填充满父盒子

https://img1.sycdn.imooc.com//climg/61da5d4909a9618404930144.jpg

2、文字没有左对齐显示，如下：

https://img1.sycdn.imooc.com//climg/61da5d71093481d205860362.jpg

建议：去掉text-align属性，通过padding调整间距，如下：

https://img1.sycdn.imooc.com//climg/61da5de70928ac7f05840448.jpg

针对同学的问题解答如下：

因为给按钮设置text-align属性，是针对按钮里面的内容的，并不是针对按钮本身的，所以无法让整个按钮居中，示例：可以调整属性值为left，里面的文字内容居左显示了，如下：

https://img1.sycdn.imooc.com//climg/61da6dda09e434e809070447.jpg

祝学习愉快~

1
收起回答
  • 提问者 芜湖呼 #1

    那么为什么在“浮动与定位”的4-6中form标签添加text-align:center;属性，可以让按钮水平居中显示呢

    2022-01-09 19:31:13
  • 好帮手慕慕子 回复 提问者 芜湖呼 #2

    因为是给按钮的祖辈元素form标签设置的text-align属性，form标签中的内容居中，按钮属于form标签中的内容，所以会居中显示，而这里是给按钮本身设置的text-align属性，只会让按钮中内容居中，并不会让按钮自身居中。

    祝学习愉快~

    2022-01-10 10:45:46
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

实现按钮跳转
16 0 9
老师看看，点击按钮无响应
1 0 3
8-1，老师您好，我有一个关于检查异常的问题。
11 0 4
点击“求累加和”按钮，没有任何反应
0 0 7
为什么没有编辑和删除按钮呢
12 0 4

登录后可查看更多问答，登录/注册

前端工程师2020
  • 参与学习           人
  • 提交作业       7884    份
  • 解答问题       15276    个

前端技术快速更迭，人才紧缺。带你从0基础开始，成为Web全栈工程师，转行就业更顺畅。

了解课程

本课精华内容

问答 作业

老师，我在xhr.send()出错了

93 2

老师好，这里虽然老师给了方法，但我想问问关于定位后的宽高

44 2

函数里面的参数是函数,那么里面作为参数的函数是如何调用的?

74 4

老师请检查

30 1

老师，关于ctx.set()我存在困惑

32 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码