テキストアライメントセンターは、h1とh2のセンタリングテキストではありません

タイトルには、h1とh2を中心に揃えようとしています。しかし、私がテキストを入力するたびに、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>

それとも、ページの中央にそれを置くために戻って、それ自身の幅の左半分に要素をプッシュするtransform: translateX(-50%);、その後、左から彼らに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

うわー！ありがとう、これは完全に働いた。 –

@ルキー問題ありません！ –

あなたは、彼らが移動を余儀なくされていない親に彼らは絶対的な位置をしているので、絶対位置を除去することによって、それが完璧に動作します。 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のセンタリングテキストではありません

答えて

関連する問題