左对齐和中间对齐在同一个类中

Question

我试图使Matter在HTML中成为left align， index 成为中心对齐，我是否需要编写另一个CSS类并应用于索引，还是有一种方法可以在相同的page-title类中管理这一点？

​

.page-title {
  float: left;
  width: 100%;
  padding: 10px 10px 0;
  line-height: normal;
  border-bottom: 1px solid #b1b7ca;
  margin-bottom: 15px;
  margin-left: 10px;
}

<div class="page-title">Matter Index</div>

​

Answer 1

是的你得把它们分开。在下面你会看到，物质是在分离的跨度，是浮动的左边。索引位于父分区和对齐中心。

.page-title {
  float: left;
  text-align:center;
  width: 100%;
  padding: 10px 10px 0;
  line-height: normal;
  border-bottom: 1px solid #b1b7ca;
  margin-bottom: 15px;
  margin-left: 10px;
}

.page-title span {float:left;}

<div class="page-title"><span>Matter</span>Index</div>