如何在弹性布局中水平居中文本？

Question

我正在关注 this item 以获取 Flexbox 布局的句柄。这个想法是以非常大的字体突出显示当前时间和温度，底部显示备用城市，右侧显示天气预报。这给出了所需外观的粗略想法（至少在概念上）：

    ___    __   _  _   ___
   / _ \  / / _| || | / _ \
  | | | |/ /_(_) || || (_) |
  | | | | '_ \ |__   _> _ <
  | |_| | (_) |   | || (_) |
   \___/ \___(_)  |_| \___/           07:00  53F
                                      08:00  53F
                                      09:00  54F
 _____ __ ______    __ __  _____      10:00  55F
| ____/_ |  ____|  /_ /_ |/ ____|       etc...
| |__  | | |__      | || | |
|___ \ | |  __|     | || | |
 ___) || | |        | || | |____
|____/ |_|_|        |_||_|\_____|

        PTC  49F  10C

完成后，此布局将完全填充客户端的浏览器窗口（客户端基本上是一个嵌入式时钟）。

我正在尝试使用 Flexbox 来做到这一点，但我在水平对齐方面遇到了困难。 （实际使用的字体和字体大小将由使用自动调整大小逻辑的 javascript 控制。） 看来我更改align-items 的努力对水平对齐没有任何影响；文本最终总是向左对齐（或者，从技术上讲，是弹性开始）。 （我也尝试过使用 justify-content 来防止我对轴的理解混淆。当然，无济于事。）我尝试在每个 div 中指定align-items，仅在顶部，也在子容器中;似乎没有效果。我也在这篇文章之外进行了搜索，但没有找到任何关于我做错了什么的线索。你能帮我理解我的错误吗？

这是我迄今为止在模型中所拥有的：

.box {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  height: 100%;
}

<div class='box' height:100%>
  <div id='time_temp_container' style='flex-flow: column nowrap;flex-grow: 1; font-size:30pt;align-items:center;'>
    <div id='time' name='time' style='font-size:85pt;'>
      07:58
    </div>    <!-- time -->
    <div id='temp' name='temp' style='font-size:70pt;'>
      47F 8C
    </div>    <!-- temp -->
    <div id='city' name='city' style='font-size:40pt;'>
      SH 20:58 33F 1C
    </div>    <!-- city -->
  </div>  <!-- time_temp_container -->
  <div id='extras' name='extras' style='flex_flow: column nowrap;'>
    <div id='icon' name='icon'>icon</div>
    <div>08:00 76F</div>
    <div>09:00 78F</div>
    <div>10:00 80F</div>
    <div>11:00 81F</div>
    <div>12:00 82F</div>
    <div>13:00 82F</div>
    <div>14:00 83F</div>
    <div>15:00 82F</div>
    <div>16:00 83F</div>
  </div>  <!-- extras -->
</div><!-- outer box -->

顺便说一句，如果您觉得我的方法可以改进，我渴望了解更好的方法。我并没有被Flexbox困住；对我来说这听起来是个好方法。

Answer 1

我会使用

text-align: center;

将文本居中

<div id='time_temp_container' style='flex-grow: 1; font-size: 30pt; text-align: center;'>

但是如果你想使用flexbox，你需要在div上设置

display: flex;

。你的其余风格就可以完成这项工作。

<div id="time_temp_container" style="display: flex; flex-flow: column nowrap; flex-grow: 1; font-size: 30pt; align-items: center;">