居中標題，但字幕居中「右」

Question

我需要居中放置一個標題，並在下一行中，我必須寫一個結尾在標題右側的小標題。例如：

     Here is my title 
          subtitle 

有人可以幫我嗎？

Answer 1

你可以通過使用自定義數據屬性和僞元素或使用簡單的CSS來解決這個問題，它完全取決於你。 下面是解決方案：

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

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

Answer 2

我想你會想要在同一個div中的兩個，但然後單獨設計它們。

所以像...

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

注意，div的大小是很重要的，因爲如果它被定義爲瀏覽器的整個長度，這看起來很奇怪。希望這有助於。