[英]text-align center is not centering text on h1 and h2
如標題所示，我正在嘗試將h1和h2居中。 但是每當我輸入text-align時： 只是將它們都向左推。 我想同時將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>
因為position: absolute; 。 這就從DOM的常規流程中刪除了一個元素，並使該元素僅與需要容納其內部內容的大小一樣大。 因此，它們不會像通常像h1和h2這樣的塊元素占用屏幕的整個寬度，而是僅占用所需的空間來容納內部文本。
您可以將元素的width: 100%; 或left: 0; right: 0; 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>
由於您將它們定位在父級的絕對位置，因此不會被迫移動，因此通過刪除絕對位置，它可以完美工作。 絕對定位
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>
試圖居中<h1> text-align:center 沒有成功；</h1>
[英]Trying to Center <h1> without success with text-align:center;
放一個 <H2> 與我的文字 <p> 同時使用“ text-align：center;”樣式設置時不起作用
[英]Putting an <H2> with my text <p> while having it styled with “text-align:center;” don't work
需要H2不僅要與文本一樣寬，還要與text-align：center相同
[英]Need H2 to be only as wide as the text, but also text-align:center
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.