用font-size 为0 不能居中最后一行

<br>

<!DOCTYPE html>

<html>

<head>

<title>BEM模式开发</title>

</head>

<body>

</nav>

</div>

</header>

<div class="wrap-item__tit">前端小白入门系列课程</div>

</div>

</a>

<div class="wrap-item__tit">HTML5与CSS3实现动态网页系列课程</div>

</div>

</a>

<div class="wrap-item__tit">ECShop3从基本使用到二次开发系列课程</div>

</div>

</a>

<div class="wrap-item__tit">零基础入门Android语法与界面系列课程</div>

</div>

</a>

</div>

<div class="wrap-item__tit">Android网络与数据存储系列课程</div>

</div>

</a>

<div class="wrap-item__tit">Android从界面到数据存储系列课程</div>

</div>

</a>

<div class="wrap-item__tit">Java基础语法与常用工具类系列课程</div>

</div>

</a>

<div class="wrap-item__tit">前端小白入门系列课程</div>

</div>

</a>

</div>

<div class="wrap-item__tit">iOS基础语法（OC&Swift）与常用控件系列课程</div>

</div>

</a>

</div>

</section>

</body>

</html>

-------------------------------------------------

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

231

232

233

234

235

236

237

body {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
}
.header {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #000;
}
.header .logo {
  float: left;
  height: 38px;
  width: 128px;
  background: url("../img/logo.png") no-repeat top center;
  margin: 11px 25px;
}
.header .nav {
  float: left;
}
.header .nav__item {
  display: block;
  float: left;
  height: 60px;
  line-height: 60px;
  padding: 0 25px;
  color: #fbfbfb;
  font-size: 14px;
}
.header .nav__item:hover {
  background-color: #363c41;
}
.header .nav__item_icon_new {
  background-color: #363c41;
}
.header .nav__item_icon_new:after {
  position: absolute;
  display: inline-block;
  content: ' ';
  top: 6px;
  width: 16px;
  height: 16px;
  background: url("../img/icon-new.png") no-repeat top center;
}
.header .profile {
  float: right;
}
.header .profile__item {
  display: block;
  position: relative;
  float: left;
  width: 60px;
  height: 60px;
}
.header .profile__item:hover {
  background-color: #ccc;
}
.header .profile__phone:before {
  display: block;
  content: " ";
  width: 22px;
  height: 22px;
  background: url("../img/icon-1-sprite_w22.png") no-repeat top center;
  position: absolute;
  top: 19px;
  left: 19px;
  background-position: 0 -22px;
}
.header .profile__message:before {
  display: block;
  content: " ";
  width: 22px;
  height: 22px;
  background: url("../img/icon-1-sprite_w22.png") no-repeat top center;
  position: absolute;
  top: 19px;
  left: 19px;
  background-position: 0 -44px;
}
.header .profile__mail:before {
  display: block;
  content: " ";
  width: 22px;
  height: 22px;
  background: url("../img/icon-1-sprite_w22.png") no-repeat top center;
  position: absolute;
  top: 19px;
  left: 19px;
  background-position: 0 -66px;
}
.header .profile__ava:after {
  display: block;
  content: " ";
  height: 36px;
  width: 36px;
  background: url("../img/ava.jpg") no-repeat top center;
  background-size: cover;
  margin: 12px;
  border-radius: 50%;
}
.header .search {
  float: right;
  padding-right: 50px;
  position: relative;
  height: 60px;
}
.header .search__input {
  width: 242px;
  border: none;
  background-color: #000;
  height: 36px;
  line-height: 36px;
  outline: none;
  color: #fbfbfb;
  border-bottom: #ccc solid 1px;
}
.header .search:before {
  content: '前端入门';
  display: block;
  position: absolute;
  width: 72px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  top: 15px;
  background-color: #ccc;
  color: #5c646b;
  font-size: 12px;
}
.header .search__submit {
  display: inline-block;
  position: absolute;
  background-position: 0 0;
  width: 22px;
  height: 22px;
  top: 20px;
  right: 50px;
  background: url("../img/icon-1-sprite_w22.png") no-repeat top center;
}
.web-main {
  height: 1610px;
  width: 100%;
}
.web-main .banner {
  height: 560px;
  background: url("../img/bg.jpg") no-repeat top center;
}
.web-main .wrap {
  height: 1050px;
  width: 1207px;
  margin: 0 auto;
  overflow: hidden;
  padding-left: 3px;
  position: relative;
  top: -150px;
}
.web-main .wrap .inner_tr:after {
  content: " ";
  display: block;
  clear: both;
  zoom: 1;
}
.web-main .wrap-item {
  position: relative;
  display: inline-block;
  float: left;
  height: 326px;
  width: 285px;
  margin-right: 20px;
  margin-bottom: 26px;
  background-color: "#ccc";
  box-shadow: 3px 3px 8px rgba(7, 17, 27, 0.1), -3px 0px 8px rgba(7, 17, 27, 0.1);
  border-radius: 0 0 5px 5px;
}
.web-main .wrap-item:after {
  content: ' ';
  display: block;
  width: 98%;
  left: 1%;
  bottom: -4px;
  height: 3px;
  background-color: #fff;
  position: absolute;
  border-radius: 4px;
  box-shadow: 0 3px 12px rgba(7, 17, 27, 0.3);
}
.web-main .wrap-item__cover {
  height: 135px;
}
.web-main .wrap-item__cover img {
  display: block;
  border-radius: 5px 5px 0 0;
  width: 100%;
}
.web-main .wrap-item__text {
  position: absolute;
  top: 124px;
  width: 229px;
  height: 132px;
  background: rgba(255, 255, 255, 0.9);
  padding: 32px 28px;
}
.web-main .wrap-item__tit {
  font-size: 18px;
  font-weight: bold;
  color: #141914;
}
.web-main .wrap-item__desc {
  position: absolute;
  top: 90px;
  font-size: 14px;
  color: #5c646b;
}
.web-main .wrap-item__desc:after {
  content: " ";
  display: block;
  position: absolute;
  top: 30px;
  height: 1px;
  width: 229px;
  background-color: #ccc;
}
.web-main .wrap-item__price {
  position: absolute;
  bottom: 20px;
  color: #ff0000;
}
.web-main .wrap-item__price i {
  vertical-align: super;
  font-style: normal;
}
.web-main .wrap-item:nth-child(4n) {
  margin-right: 0;
}

慕用9491247 2019-01-03

源自：less实战案例 3-9 作业题

收起

1回答

好帮手慕星星回答被采纳获得+3积分 2019-01-03 18:05:42

同学你好，font-size属性是控制字体大小的，不能控制居中显示。

可以将最后一个设置为块元素，将浮动去掉，使用margin:0 auto;居中显示。参考：

自己添加测试下，祝学习愉快！

收起回答

慕用9491247 提问者 #1

好的不过有个同学答是 font-size 可以去掉去除行内块的间距没看到效果这个可以不过这样俩个的时候不能自动居中中间位置

2019-01-03 18:46:20
好帮手慕星星回复提问者慕用9491247 #2

font-size是去除掉display:inline-block;元素之间默认的间隙，但是每一个设置了浮动之后，就没有间隙了。上面两行使用浮动完成就可以，下面单独变成块居中显示。

2019-01-03 19:02:58