html - 标题居中但副标题居中 "right"

Question

我需要将标题居中，在下一行中，我必须写一个在标题右侧结束的副标题。示例:

                     Here is my title
                             subtitle

有人可以帮我吗？

Answer 1

您可以通过使用自定义数据属性和伪元素或使用简单的 css 来解决这个问题，这完全取决于您。 解决方案如下:

.page-title {
	text-align: center;
}
h1 {
	display: inline-block;
	position: relative;
}
h1:after {
	content: attr(data-subtitle);
	position: absolute;
	top: 100%;
	right: 0px;
}
.another h1 {
	margin-bottom: 40px;
}
.another span {
	position: absolute;
	top: 100%;
	right: 0px;
}

<div class="page-title">
	<h1 data-subtitle="subtitle">Here is my title</h1>
</div>
<div class="page-title another">
	<h1>Here is my title <span>subtitle</span></h1>
</div>