Html 将文本居中对齐答案

【问题标题】：Html align text to centerHtml 将文本居中对齐
【发布时间】：2020-06-14 20:48:03
【问题描述】：

我正在制作一些作品集，这个问题出现在我最喜欢的音乐作品集中。您可以看到较长的音乐名称将转到另一行并自动将文本对齐到中心。但是，不长的音乐名称不会使文本居中对齐。我该怎么办？

img{
  width: 160px;
  height: 90px;
}
.container{
  display: grid;
  grid-gap: 10px;
}
.music{
  background: #123;
  width: 400px;
  height: 90px;
}
a{
  display: flex ;
}
p{
  text-decoration: none;
  list-style: none;
  color: white;
  font-family: sans-serif;
  font-size: 26px;
  text-align: center;
  display: flex;
  align-items: center;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="container">
      <article class="music">
          <a href="#">
            <img class="thumbnail" src="https://img.youtube.com/vi/RgKAFK5djSk/maxresdefault.jpg" alt="">
            <p>See you again</p>
          </a>
       </article>
        <article class="music">
            <a href="#" class="music-child">
              <img class="thumbnail" src="http://i3.ytimg.com/vi/o3KXwe-7A-I/maxresdefault.jpg" alt="">
              <p>Deep Chills - Run Free</p>
            </a>
        </article>
    </div>
    <script src="script.js"></script>
  </body>
</html>

【问题讨论】：

标签： html css text-align

【解决方案1】：

您的 p 标签中不需要display: flex;，您可能需要添加width: 100%;

img {
  width: 160px;
  height: 90px;
}

.container {
  display: grid;
  grid-gap: 10px;
}

.music {
  background: #123;
  width: 400px;
  height: 90px;
}

a {
  display: flex;
}

p {
  text-decoration: none;
  list-style: none;
  color: white;
  font-family: sans-serif;
  font-size: 26px;
  text-align: center;
  align-items: center;
  width: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="container">
    <article class="music">
      <a href="#">
        <img class="thumbnail" src="https://img.youtube.com/vi/RgKAFK5djSk/maxresdefault.jpg" alt="">
        <p>See you again</p>
      </a>
    </article>
    <article class="music">
      <a href="#" class="music-child">
        <img class="thumbnail" src="http://i3.ytimg.com/vi/o3KXwe-7A-I/maxresdefault.jpg" alt="">
        <p>Deep Chills - Run Free</p>
      </a>
    </article>
  </div>
  <script src="script.js"></script>
</body>

</html>

【讨论】：

【解决方案2】：

您可以在 p 标签中添加 margin-left 和 margin-right 如下：

margin-left: auto;
margin-right: auto;

那么完整的p标签样式如下：

p {
  text-decoration: none;
  list-style: none;
  color: white;
  font-family: sans-serif;
  font-size: 26px;
  text-align: center;
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

希望对您有所帮助！

【讨论】：