html - 如何使用 CSS 在标题 block 中垂直居中包含水平居中文本的图像？

Question

使用 Moodle 3.5 html block ，我试图创建一个位于页面顶部的标题栏。页面标题需要在中间，而后退箭头图像需要放在左侧。

这是我正在使用的代码，但是箭头没有居中放置:

<div style="text-align: center; background-color: #1e2d41; height: auto; color: #ffffff; font-size: 20px; padding: 15px; width: auto;">

  <span style="float:left;">
    <a href="https://yopa.clcmoodle.org/course/view.php?id=160"><img src="https://yopa.clcmoodle.org/draftfile.php/4156/user/draft/759697841/Backward%20White.png" alt="" width="40" height="40" role="presentation" class="img-responsive atto_image_button_text-top"></a>
  </span>

  <strong>
    Communication &amp; Social Skills
  </strong>
</div>

图片:

Answer 1

刚刚找到这篇文章:https://teamtreehouse.com/community/text-align-center-margin-auto-which-one-is-better

据我了解，如果您尝试将文本以外的内容居中，则应使用 margin-left: auto;右边距:自动

因为我非常害怕 CSS，所以我倾向于在我的 div 中同时使用这两种东西:

 text-align: center;
 margin-left: auto;
 margin-right: auto;

祝一切顺利，托马斯