Text-Align-Center zentriert Text nicht auf h1 und h2

Wie der Titel sagt, versuche ich, h1 und h2 zu zentrieren. Aber immer wenn ich text-align: center; es schiebt sie beide einfach nach links. Ich möchte sowohl h1 als auch h2 in der direkten Mitte des Bildschirms haben. Ich könnte es manuell machen, aber ich möchte, dass es perfekt im Mittelpunkt steht. Thanks :)Text-Align-Center zentriert Text nicht auf h1 und 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>

Quelle

2017-01-14 Anonymous

Es ist wegen position: absolute;. Dadurch wird ein Element aus dem normalen DOM-Fluss entfernt und das Element wird nur so groß, wie es für den Inhalt des DOM benötigt wird. Anstatt also die gesamte Breite des Bildschirms einzunehmen, wie es Blockelemente wie h1 und h2 normalerweise tun würden, nehmen sie nur so viel Platz in Anspruch, wie erforderlich ist, um den darin enthaltenen Text zu enthalten.

Sie können die Elemente width: 100%; oder left: 0; right: 0; so machen, dass sie die gesamte Breite der Seite einnehmen, dann funktioniert text-align: center; wie erwartet.

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>

Oder Sie können sie 50% von links positionieren, dann transform: translateX(-50%); das Element zurück in die linke Hälfte seiner eigenen Breite schieben Sie es in der Mitte der Seite zu setzen.

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>

Quelle

2017-01-14 22:01:54

Wow! Vielen Dank, das hat perfekt funktioniert. –

@Lukie kein Problem! –

Da du bist Position sie absolut an die Mutter sind sie bewegen sich nicht gezwungen worden, indem die Position absolute Entfernung es funktioniert perfekt. 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>

Quelle

2017-01-14 22:01:29

Ich habe dies versucht, und aus irgendeinem Grunde gibt es den Text einen weißen Hintergrund dahinter. Das wäre kein Problem, aber es deckt den Hintergrund meiner Webseite ab. –

Hier ist ein Bild: https://gyazo.com/faa9ef5c318feda0f47e3231d5467eb6 das ist, wie es aussehen soll, aber mit dem Text zentriert: https://gyazo.com/5fd0afdd18ba24090a5a11f889312f31 –

Text-Align-Center zentriert Text nicht auf h1 und h2

Antwort

Verwandte Themen