css - 居中文字和图片

Question

有问题居中两行文字和一张图片。我尝试了不同的 css 设置。

我希望它看起来像这样

------
pic    LINE1
       LINE2
------

我的代码现在看起来像这样

HTML

<a href="#" onclick="Channel(SVT1HD)"</a>
    <div class="channel">
        <div class="img"><img style="width: auto; height: 40px;" img src="img/svt1hd.png" alt="SVT1"></div>
        <div id ="channel1_title" class="title">Aktuellt Program</div>
        <div id ="channel1_info" class="info">Info</div>
    </div>
</a>

CSS

body {
    margin: 20px;
    background: #595757;
}

.channel {
    background: #393737;
}

.title {
    vertical-align:top;
    font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
    color: white;
}

.info {
    vertical-align:top;
    font: bold 17px/1.5 Helvetica, Verdana, sans-serif;
    color: white;

a {
    color: inherit;
    text-decoration: none;
}

.img {
    float: left; 
    margin: 0 15px 0 0;
}

Answer 1

我希望它看起来像这样:

1) 为 <div> 添加包装器包含文字

2) 设置display: flex属性(property).channel元素

3) 通过 flex-properties 居中图片

结果

body {
  margin: 20px;
  background: #595757;
}

.channel {
  display: flex;
  background: #393737;
}

.title {
  vertical-align: top;
  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
  color: white;
}

.info {
  vertical-align: top;
  font: bold 17px/1.5 Helvetica, Verdana, sans-serif;
  color: white;
}

a {
  color: inherit;
  text-decoration: none;
}

.img {
  display: flex;
  align-items: center;
  margin: 0 15px 0 0;
}

.img img {
  height: 40px;
}

<a href="#" onclick="Channel(SVT1HD)">
  <div class="channel">
    <div class="img">
      <img src="https://picsum.photos/536/354" alt="SVT1">
    </div>
    <div>
      <div id="channel1_title" class="title">Aktuellt Program</div>
      <div id="channel1_info" class="info">Info</div>
    </div>
  </div>
</a>