Html将文本对齐到中心

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

img{
宽度：160px；
高度：90px；
}
.集装箱{
显示：网格；
栅隙：10px；
}
.音乐{
背景：#123；
宽度：400px；
高度：90px；
}
a{
显示器：flex；
}
p{
文字装饰：无；
列表样式：无；
颜色：白色；
字体系列：无衬线；
字号：26px；
文本对齐：居中；
显示器：flex；
对齐项目：居中；
}

答复

您不需要

显示：flex在您的p标签中，您可能需要添加
宽度：100%


img{
宽度：160px；
高度：90px；
}
.集装箱{
显示：网格；
栅隙：10px；
}
.音乐{
背景：#123；
宽度：400px；
高度：90px；
}
a{
显示器：flex；
}
p{
文字装饰：无；
列表样式：无；
颜色：白色；
字体系列：无衬线；
字号：26px；
文本对齐：居中；
对齐项目：居中；
宽度：100%；
}

答复
您只需在p标签中添加左边距和右边距，如下所示：

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

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

因此，p标签的完整样式如下所示：

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

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

希望对大家有所帮助