1. 首页
  2. 问题列表
  3. Html将文本居中对齐
提问者：小点点

Html将文本居中对齐


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

null

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>

null


共2个答案

匿名用户

在p标记中不需要display:flex；，您可能希望添加width:100%；

null

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>

匿名用户

您只需在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;
}

希望对您有所帮助！

相关问题