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

Question

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

这是我正在使用的代码，但是箭头并未居中放置：

<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; margin-right：自动

由于我非常担心CSS，所以我倾向于在div中同时使用这两种方法：

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

祝一切顺利， 托马斯

Answer 2

我会使用display:flex以及样式表，而不是内联样式（维护起来容易得多，并且会减少文件大小）

.container {
   display:flex;           /* change display type to flex */
   flex-direction:row;     /* align child elements in a row */
   align-items:center;     /* vertical centering */
   justify-content:center; /* horizontal centering */
   
   background-color: #1e2d41;
   color: #ffffff; 
   font-size: 20px; 
   padding: 15px;
}

.container > span {
    display:inline-block;   /* make this span inline-block so it can have a width */
    width:40px;              /* make it as wide as the image */
    margin-right:1em;       /* optional spacing */
}

<div class="container">

  <span>
    <a href="https://via.placeholder.com/40x40" 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 3

首先，请注意，vertical-align仅适用于表单元格和内联级元素。 有几种设置垂直对齐方式。但是，我将向您展示两种最喜欢的方法：

1。使用转换

.child {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

<div style="position:relative; width:50px; height:100px;">
    <div style="position: relative;height: 56px;background-color: green;">
        <div class="child" style="background-color: red;color-:white">XYZ</div>
    </div>
</div>

2。使用Flexbox

.parent{
background-color:pink;
width:300px;
height:200px;
  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

<div class="parent">
  <div class="child">text</div>
</div>

为您的父元素提供 display：flex 和 align-items：center 。有关flex的更多详细信息，请参阅https://cssreference.io/flexbox/

对于自动前缀，强烈建议您使用Autoprefixer和pleeease.io之类的工具来这样做

---

您可以通过 display：table 到您的父元素，然后 display：table-cell 和 vertical-align：middle 来实现您的孩子元件。为此，请检查此article