HTML / CSS：如何将 link 对齐到另一个网站到网页中心 --> 尝试将 Link 对齐到 CSS 中的中心 ... 没有工作

Question

我有以下 HTML 带有正文标签的代码：

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Dwight Schrute's Bidding Blunder</title>

    <!-- the MAIN.CSS file is linked here -->
    <link rel="stylesheet" href="guessing-game.css">


  </head>

  <body>

    <body class='bg' background="dwight_schrute.jpg"></body>


    <h1 align="center">Dwight Schrute's Bidding Blunder</h1>

    <div class="youTubeLink">
      <a href="https://www.youtube.com/watch?v=Vhsng72lC4s">The Office Episode: Bidding Blunder</a>
    </div> 

    <div>
      <p id="p1">BEFORE I GUESS</p>
      <p id="p2">ANYTHING</p>
      <p id="p3">I ASK MYSELF</p>
      <p id="p4">"WOULD AN IDIOT DO THAT?"</p>
      <p id="p5">AND IF THE ANSWER IS YES</p>
      <p id="p6">I DO NOT GUESS THAT</p>
      <br>
      <p id="p7">-Dwight Schrute</p>
    </div>

 </body>

</html>

我正在尝试让 link 与我的页面中心对齐。 CSS 已 link 编辑到我的 HTML 文件（适用于其他内容）。

我尝试了以下 CSS：

.bg {
    background-size:100% 100%;
}

.youTubeLink {
    text-align: center;
}

.youTubeLink>a {
    color: whitesmoke;
}


a:visited {
    text-align: center;
    /* color: #3C1900; */
    color: whitesmoke;
}

但是我的 link 仍然是左对齐的（link 在页面的左上角并带有下划线）：

Answer 1

您正在将文本对齐属性分配给 link 元素，这是一个内联元素，因此它的宽度只是其内容的大小。如果将 link 放在 div 元素中并将文本对齐属性分配给 div，那么因为 div 是块级元素，它占据页面宽度的 100%，link 将对齐到页面的中心：

body {
  background-color: lightblue;
}

.youTubeLink {
  text-align: center;
}

.youTubeLink>a {
  color: whitesmoke;
}

<div class="youTubeLink">
  <a href="https://www.youtube.com/watch?v=Vhsng72lC4s">The Office Episode: Bidding Blunder</a>
</div>

HTML / CSS：如何将 link 对齐到另一个网站到网页中心 --> 尝试将 Link 对齐到 CSS 中的中心 ... 没有工作

HTML / CSS: How to align link to another website to Center of Webpage --> Tried Align Link to Center in CSS ... did not work

html

css

center

alignment

hyperlink