无法将文本与中心对齐

Question

我尝试将文字对齐到中心（垂直和水平）：

  <div class="panel-small sport">
    <b>Sport and Activity</b>
  </div>

这是css：

.panel-small *
{
  text-align: center;
  vertical-align: middle;
}

.sport
{
  background-image: url("../img/sport.png");
 left: 248px;
}

文字甚至出现在顶部

Answer 1

尝试弹性定位：

display: flex;
justify-content: center;
align-items: center;

Answer 2

你可以查看这个技巧：

<强> CSS：

text-align: center;
vertical-align: middle;
line-height: 90px;  /* the same as your div height */

以下是完整的解释：https://stackoverflow.com/a/5703632/5655917

或者您可以使用 Flexbox ：

<强> CSS：

.panel-small *{
    display: flex;
    justify-content: center;
    align-items: center;
}

这里有更多解释：https://tutorialzine.com/2015/09/quick-tip-the-simplest-way-to-center-elements-vertically-and-horizontally

问候！