Question

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

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

我附上该网站的照片。Photo-Click here

<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容器，并在其所有 direct 子元素上启用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>

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

2 个答案: