центр выравнивания текста не центрирует текст на h1 и h2

Как говорится в названии, я пытаюсь центрировать h1 и h2. Но всякий раз, когда я набираю text-align: center; он просто толкает их обоих влево. Я хотел бы иметь как h1, так и h2 в прямом центре экрана. Я мог бы сделать это вручную, но я хочу, чтобы он был абсолютно центром. Спасибо :)центр выравнивания текста не центрирует текст на h1 и h2

h1 { 
 
    position: absolute; 
 
    font-family: 'Passion One'; 
 
    font-size: 50px; 
 
    color: #42E616; 
 
    letter-spacing: 1.6rem; 
 
    top: calc(80% - 200px); 
 
    text-align: center; 
 
    text-shadow: 2px 4px 3px rgba(0,0,0,0.6); 
 
    opacity: .68; 
 
    z-index: 2001; 
 
} 
 

 
h2 { 
 
    position: absolute; 
 
    font-family: 'Open Sans', monospace; 
 
    font-size: 12px; 
 
    color: black; 
 
    letter-spacing: .4rem ; 
 
    top: calc(58% - 30px); 
 
    text-align: center; 
 
    opacity: .68 ; 
 
    z-index: 2002; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
    <link href = "https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet"> 
 

 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
 

 
    <link rel = "stylesheet" href="Style.css"> 
 

 
    <meta name = "viewport" content = "width = device-width, initial-scale=1"> 
 

 
    <title> AL-SABA.net </title> 
 

 
</head> 
 

 
<header> 
 
    <h1> Title </h1> 
 

 
    <h2> Personal Website </h2> 
 
</header> 
 
    
 
    
 
</html>

источник

2017-01-14 Anonymous

Это из-за position: absolute;. Это удаляет элемент из нормального потока DOM и делает элемент настолько большим, насколько ему нужно, чтобы соответствовать содержимому внутри него. Поэтому вместо того, чтобы занимать всю ширину экрана, как обычно, такие элементы блока, как h1 и h2, занимают столько места, сколько необходимо, чтобы содержать текст внутри.

Вы можете сделать элементы width: 100%; или left: 0; right: 0;, чтобы они занимали всю ширину страницы, тогда text-align: center; будет работать как ожидалось.

h1 { 
 
    position: absolute; 
 
    font-family: 'Passion One'; 
 
    font-size: 50px; 
 
    color: #42E616; 
 
    letter-spacing: 1.6rem; 
 
    top: calc(80% - 200px); 
 
    text-align: center; 
 
    text-shadow: 2px 4px 3px rgba(0,0,0,0.6); 
 
    opacity: .68; 
 
    z-index: 2001; 
 
} 
 

 
h2 { 
 
    position: absolute; 
 
    font-family: 'Open Sans', monospace; 
 
    font-size: 12px; 
 
    color: black; 
 
    letter-spacing: .4rem ; 
 
    top: calc(58% - 30px); 
 
    text-align: center; 
 
    opacity: .68 ; 
 
    z-index: 2002; 
 
} 
 

 
h1,h2 { 
 
    left: 0; 
 
    right: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
    <link href = "https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet"> 
 

 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
 

 
    <link rel = "stylesheet" href="Style.css"> 
 

 
    <meta name = "viewport" content = "width = device-width, initial-scale=1"> 
 

 
    <title> AL-SABA.net </title> 
 

 
</head> 
 

 
<header> 
 
    <h1> Title </h1> 
 

 
    <h2> Personal Website </h2> 
 
</header> 
 
    
 
    
 
</html>

Или вы можете поместить их на 50% слева, а затем transform: translateX(-50%); толкать элемент обратно в левую половину его собственной ширины, чтобы поместить его в центре страницы.

h1 { 
 
    position: absolute; 
 
    font-family: 'Passion One'; 
 
    font-size: 50px; 
 
    color: #42E616; 
 
    letter-spacing: 1.6rem; 
 
    top: calc(80% - 200px); 
 
    text-align: center; 
 
    text-shadow: 2px 4px 3px rgba(0,0,0,0.6); 
 
    opacity: .68; 
 
    z-index: 2001; 
 
} 
 

 
h2 { 
 
    position: absolute; 
 
    font-family: 'Open Sans', monospace; 
 
    font-size: 12px; 
 
    color: black; 
 
    letter-spacing: .4rem ; 
 
    top: calc(58% - 30px); 
 
    text-align: center; 
 
    opacity: .68 ; 
 
    z-index: 2002; 
 
} 
 

 
h1,h2 { 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
    <link href = "https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet"> 
 

 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
 

 
    <link rel = "stylesheet" href="Style.css"> 
 

 
    <meta name = "viewport" content = "width = device-width, initial-scale=1"> 
 

 
    <title> AL-SABA.net </title> 
 

 
</head> 
 

 
<header> 
 
    <h1> Title </h1> 
 

 
    <h2> Personal Website </h2> 
 
</header> 
 
    
 
    
 
</html>

источник

2017-01-14 22:01:54

Ничего себе! Большое спасибо, это сработало отлично. –

@ Lukie без проблем! –

Поскольку вы их позицию абсолютного родителю они не были вынуждены двигаться, путем удаления позиции абсолютного он работает отлично. Absolute positioning

h1 { 
 
    font-family: 'Passion One'; 
 
    font-size: 50px; 
 
    color: #42E616; 
 
    letter-spacing: 1.6rem; 
 
    top: calc(80% - 200px); 
 
    text-align: center; 
 
    text-shadow: 2px 4px 3px rgba(0,0,0,0.6); 
 
    opacity: .68; 
 
    z-index: 2001; 
 
} 
 

 
h2 { 
 
    font-family: 'Open Sans', monospace; 
 
    font-size: 12px; 
 
    color: black; 
 
    letter-spacing: .4rem ; 
 
    top: calc(58% - 30px); 
 
    text-align: center; 
 
    opacity: .68 ; 
 
    z-index: 2002; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
    <link href = "https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet"> 
 

 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
 

 
    <link rel = "stylesheet" href="Style.css"> 
 

 
    <meta name = "viewport" content = "width = device-width, initial-scale=1"> 
 

 
    <title> AL-SABA.net </title> 
 

 
</head> 
 

 
<header> 
 
    <h1> Title </h1> 
 

 
    <h2> Personal Website </h2> 
 
</header> 
 
    
 
    
 
</html>

источник

2017-01-14 22:01:29

Я попробовал это, и по какой-то причине он дает тексту белый фон позади него. Который не был бы проблемой, но это покрывает мой фон вебсайтов. –

Вот фотография: https://gyazo.com/faa9ef5c318feda0f47e3231d5467eb6 это то, на что он должен выглядеть, но с текстом по центру: https://gyazo.com/5fd0afdd18ba24090a5a11f889312f31 –

центр выравнивания текста не центрирует текст на h1 и h2

ответ

Смежные вопросы