Question

正如标题所说，我试图将h1和h2居中。但每当我输入text-align：center;它只是将它们推向左侧。我想将h1和h2都放在屏幕的直接中心。我可以手动完成，但我希望它是完美的中心。谢谢:)）

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

这是因为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>

Answer 2

由于你将它们绝对地定位于父母，因此他们不会被迫移动，通过移除绝对位置，它可以完美地运作。 Absolute positioning

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

text-align center不是h1和h2上的文本居中

2 个答案: