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

<!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>

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

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