可以在 flex 显示中将文本居中对齐答案

【问题标题】：Can align text to center at flex display可以在 flex 显示中将文本居中对齐
【发布时间】：2019-04-19 21:44:25
【问题描述】：

我的问题是，我无法将文本水平居中对齐。垂直地，我将它对准中心，但水平地，我不能。（当文本较长时，它水平居中？！如果我没看错的话。）

我尝试添加<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>-element css：

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

我做错了什么？

【问题讨论】：

你在使用引导类吗？
向我们展示您的 html 代码
欢迎来到 Stack Overflow！寻求代码帮助的问题必须包括在问题本身最好在Stack Snippet 中重现它所需的最短代码。见How to create a Minimal, Complete, and Verifiable example
stackoverflow.com/q/39678610/3597276

标签： html css twitter-bootstrap flexbox

【解决方案1】：

如果没有在其余 html 和 css 的上下文中查看您的代码，我会将justify-content: center ; 放在父元素即 h2 上。我假设这被设置为宽度的 100% 以匹配图像的宽度。

查看这里以获取有关 flex 的完整信息： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

【解决方案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>

【讨论】：