右ヘッダ

Question

下サブヘッダをどのように配置するかをこれはばかげた質問かもしれませんが、右のメインヘッダの下にサブヘッダーを配置するための最良の方法は何ですか？私は、メインヘッダ（H1）を持っていると、CSSは以下の通りです：

h1 { 
 
    color: #000; 
 
    position: relative; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 20%; 
 
    -webkit-transform: translateX(-50%); 
 
    transform: translateX(-50%); 
 
    white-space: nowrap; 
 
}

<h1>Test</h1>

私はその下に直接サブヘッダを入れたいのですが、トップ指定せずにそれを配置する方法がわからないよ：「× "px;

提案がありますか？その後、

Answer 1

全く愚かな質問はありません！トレバーはあなたが唯一の1を割り当てることができたときに、この要素に割り当てられた2位の性質を持っていると述べているようにあなたが:)まずオフになっているところ、私たちすべてが正確に開始しました。もう少し重いので、ここでは絶対に、または相対的なポジショニングを使用しないでください。また、絶対位置指定+ 50％の翻訳を使用することは、一部のブラウザには完全にはあてはまらない。中央：この場合の最善の解決策は、親divタグの内側に向かって見出しとあなたのサブをラップし、その親divタグにテキスト整列のCSSプロパティを割り当てることであろう。この理由は、自分の親のdivはブロックレベル要素で、その後、テキスト整列を追加し、コンテナの幅全体にまたがるです：センターは、その親の内部のすべてのインライン子要素を中心に説明します。 https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

コードペン： http://codepen.io/chasereckling/pen/gwJkgN

<div> 
    <h1>HEADING</h1> 
    <h2>SUB HEADING</h2> 
</div> 

<style> 
    div {text-align: center;} 
</style> 

は、このことができます願っています！あなたの<H1> CSSに設定されたプロパティ：

Answer 2

これは既存のCSSは、センタリングがtext-align: centerを使用してはるかに容易に行うことができることを、その目的のために少し多すぎるラッパー

div { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 20%; 
 
    -webkit-transform: translateX(-50%); 
 
    transform: translateX(-50%); 
 
    text-align: center; 
 
} 
 
h1, 
 
h4 { 
 
    color: #000; 
 
    position: relative; 
 
}

<div> 
 
    <h1>Test</h1> 
 
    <h4>Test</h4> 
 
</div>

Answer 3

を使用して、オプションのだろう、とサブタイトルで同じことを行うだけでなく、マージンを調整することもできます。あなたはh1に字幕がまだ近くにしたい場合は、line-height: 1em（または、あなたのニーズに合う他の値）を使用します。

h1 { 
 
    color: #000; 
 
    margin-top: 20%; 
 
    text-align: center; 
 
    margin-bottom: 0; 
 
} 
 
h2 { 
 
    margin-top: 0; 
 
    text-align: center; 
 
    line-height: 1em; 
 
}

<h1>Test</h1> 
 
<h2>Subtitle</h2>