Question

我正在尝试将HTML中的 Matter 设为left align，索引为中心对齐，是否必须编写另一个CSS类并应用索引或有一种方法可以在同一个page-title类

中管理它

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

嗯，你可以用这样的小技巧来做到这一点：

包含:after和:before元素以使用text-align:justify并将单词分隔为＆＃34; three＆＃34;列。
_{注意：您需要在文本的开头添加空格}
使用direction将第二个单词与中心对齐

＆＃13;

.page-title {
  padding: 10px 10px 0;
  line-height: normal;
  border-bottom: 1px solid #b1b7ca;
  margin-bottom: 15px;
  margin-left: 10px;
  text-align: justify;
  direction:rtl;
}

.page-title:before,
.page-title:after {
  content: " ";
  display: inline-block;
}
.page-title:after {
  width: 100%;
}

＆＃13;

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

＆＃13;

Answer 2

是的，你必须将它们分开。下面你将看到物质处于分离范围内并向左浮动。索引位于父Div和对齐中心。

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

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

2 个答案: