Html 如何使标题的图像和文本水平居中？

我有一个图像和一个文本。我需要文本应该在图像后面的一行。 在像[图像]时间跟踪器一样并排对齐两个内容后，将两个内容水平放置在屏幕中心，作为当前页面的标题。 下面给出了我试图做的事情

 <div class="row">
      <div class="col-80 col-offset-10">

          <div class="appheadingcenter">

            <img src="img/clock.png" alt="clock" class="clockwidth"></img>
            <div class="timesheettext2">
              <h1 class="timesheettext">
                <b>Timesheet Tracking</b>
              </h1>
            </div>
          </div>

        </div>

        </div>

时间表跟踪

只需给出以下css即可<代码>显示：flex将使图像和文本并排显示，

使内容对齐：居中显示将使其水平居中

.appheadingcenter {
    display: flex;
    justify-content: center;
}



时间表跟踪
这里有一种使用
显示的技术：flex

注意：单击完整页面可查看此演示的大图


。标题框{
显示器：flex；
对齐项目：居中；
最高：50%；
左：50%；
位置：绝对位置；
转换：翻译（-50%，-50%）；
}
.相框{
显示：内联块；
背景：url（“https://bobagaming.files.wordpress.com/2015/10/league-of-legends-world-championship-logo-eps-vector-image.png）无重复中心；
宽度：计算（4vw+4vh）；
高度：计算（4vw+4vh）；
背景尺寸：封面；
}
.文本框{
字体系列：“Arial”；
字体大小：calc（2.5vw+2.5vh）；
显示：内联块；
利润率：1vh 1vw；
}

世锦赛
我建议你创建一个JSFIDLE或类似的东西，在那里你可以轻松地使用css来实现你想要的东西。请添加一些解释。您的答案当前标记为“低质量”，可能最终会被删除。我想了解更多关于flex概念的信息。对于flex概念中的特定div垂直居中，我应该怎么做？@Visprasad
align items:center就可以了。更多细节，在这里玩。它在顶部，而不是垂直居中。我必须使它成为屏幕的中心。@Visprasad Ohh然后使用
.row{left:50%；position:absolute；top:50%；transform:translate（-50%，-50%）；}
使它成为屏幕的精确中心现在检查它。我把它放在屏幕的正中央（x=50，y=50），对吗？或者你想让它在顶部居中（x=50，y=0）？我不认为将宽度设置为454px是一个好主意，我不认为它会在每个设备中给出精确的中心。这背后的逻辑是什么？你怎么能确定它的绝对中心呢？在我的解决方案中，样式
text align:center负责将所有内容放在中心。但是它不能与普通div一起工作，所以我添加了
display:inline块以在其上应用中心样式。我还应用了
float:left样式，以便两者位于同一行中。