Как разместить подзаголовок прямо под заголовком

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

Там нет ни одного глупых вопросов! мы все начали точно, где вы. Сначала, как сказал Тревор, у вас есть 2 свойства позиции, назначенные этому элементу, когда вы можете назначить только один. Во-вторых, я бы не использовал абсолютное или относительное позиционирование, чтобы выполнить то, что вы хотите здесь, так как оно немного тяжело. Также использование абсолютного позиционирования + перевод 50% не совсем дружелюбен к некоторым браузерам. Лучшим решением в этом случае было бы обернуть заголовок и подзаголовок внутри родительского тега div и присвоить этому родительскому тегу div свойство CSS text-align: center. Причина этого заключается в том, что ваш родительский div будет элементом уровня блока и охватывает всю ширину контейнера, а затем добавляет text-align: center будет центрировать все встроенные дочерние элементы внутри этого родителя. 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> 

надеюсь, что это помогает!

Answer 2

Может быть, это вариант, используя обертку

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

Ваш существующий CSS является немного слишком много для этой цели, что центрирование можно сделать гораздо проще с помощью text-align: center, а затем вы можете просто сделать то же самое для субтитров, а также отрегулировать поля. Если вы хотите, подзаголовок еще ближе к 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>