可以将文本对齐以在柔性显示的中心

Question

我的问题是，我无法将文本水平对齐。 在垂直方向上，我将其居中对齐，但在水平方向上，我不能。 （当文本较长时，其水平居中吗？！如果我看对了。）

我尝试添加<a>元素display:block和text-align:center ，但没有解决我的问题。

我附上该网站的照片。 图片点击这里

<a>元素位于<h2>元素中。

<h2> CSS：

line-height: 22px;
margin-top: 10px;
margin-bottom: 5px;
font-size: 16px;
height: 55px;
font-weight: 600;
display: flex;
align-items: center;
text-align: center;

<a>元素css：

color: #333;
    -webkit-transition: color .5s;
    -moz-transition: color .5s;
    -ms-transition: color .5s;
    -o-transition: color .5s;
    transition: color .5s;

我究竟做错了什么？

Answer 1

如果没有在HTML和CSS其余部分的上下文中看到您的代码，我会把justify-content: center ; 在父元素即h2上。 我假设将其设置为宽度的100％以匹配图像的宽度。

签出有关flex的完整信息： https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

display: flex将元素定义为flex容器，并在其所有直接子元素上启用flex属性。 无需将flex应用于<h2> ，您需要将其应用于父容器以使其起作用。

 .container { width: 200px; height: 150px; display: flex; justify-content: center; align-items: center; border: 1px solid black; } 

 <div class='container'> <h2> <a>Game Title</a> </h2> </div>