html - 左对齐和中对齐都在同一类中

Question

我正在尝试使 HTML 中的 Matter 左对齐 和 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

好吧，你可以用这样的小技巧来做到这一点:

• 包括 :after 和 :before 元素以使用 text-align:justify 并将单词分隔为“三”列。
  _{注意:您需要在文本开头添加一个空格}
• 使用direction让第二个单词居中对齐

.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%;
}

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