text-align center 没有将 h1 和 h2 上的文本居中

Question

正如标题所说，我正在尝试使 h1 和 h2 居中。但是每当我输入 text-align: center;它只是将它们都推到左边。我希望 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>

Answer 1

由于您将它们相对于父级定位为绝对位置，因此它们不会被迫移动，通过删除绝对位置它可以完美地工作。 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>

Answer 2

是因为position: absolute;。这从 DOM 的正常流中删除了一个元素，并使该元素的大小只需要适合其中的内容即可。因此，它们不会像通常像 h1 和 h2 这样的块元素那样占据整个屏幕宽度，它们只占用包含内部文本所需的空间 space。

您可以让元素 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>

text-align center 没有将 h1 和 h2 上的文本居中

text-align center is not centering text on h1 and h2

html

css

text

text-align

center