可以將文本對齊以在柔性顯示的中心

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>