以标题为中心但副标题是中心＆＃34;右边＆＃34;

Question

我需要将标题置于中心位置，在下一行中，我必须在标题右侧写一个副标题。例如：

                     Here is my title
                             subtitle

有人可以帮助我吗？

Answer 1

我想你会想要两个在同一个div中，但是然后分别设置它们。

就像......

<div>
    <h1 style="text-align: center">Here's my title</h1>
    <br>
    <h3 style="text-align: right">My subtitle</h3>
</div>

请注意div的大小很重要，因为如果将它定义为浏览器的整个长度，这看起来很奇怪。希望这会有所帮助。

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;