如何在具有居中文本和正确背景的div中浮动图像

Question

这就是我的标题栏目前的样子：https://i.imgur.com/Hx67zu6.png

但是，我希望文本水平居中，并将图像一直放到左边。

当我尝试将float：left添加到图片的css时，它完全搞砸了，就像这样：https://i.imgur.com/UtLC3xk.png

如您所见，标题未水平或垂直对齐，并且条形图不会拉伸以容纳图像。

HTML：

<div class="EA-header-bar">
    <img src="~/Images/EA Icons/YoungDriver_white.png" class="EA-header-image" />
    <p class="EA-header-text">
        <b>YOUNG DRIVERS</b>
    </p>
</div>

CSS：

.EA-header-bar {
    background-color: rgb(206,33,39);
    text-align: center;
}

.EA-header-image {
    margin: 1%;
    margin-left: 3%;
    height:150px;
    float: left;
}

.EA-header-text {
    text-align: center;
    color: white;
    font-size: 6vmin;
    display: inline-block;
    vertical-align: middle;
    font: bolder;
    font-family: kalinga;
}

Answer 1

在进行这种定位工作时尝试使用flexbox，编码快速而又漂亮。另外，在<img>中添加<p>，<div>或相关内联标签等标签只是为了寻找专业人士，但这些只是建议总是寻找改善css的方法。

＆＃13;

＆＃13;

.EA-header-bar {
    display: flex;
    background-color: rgb(206,33,39);
    text-align: center;
    justify-content: center;
    align-items: center;
}
.EA-col-img {
  padding-left: 20px;
}
.EA-col-txt {
  flex:1
}
.EA-header-image {
    height:150px;
}

.EA-header-text {
    color: white;
    font-size: 6vmin;
    font: bolder;
    font-family: kalinga;
}

＆＃13;

<div class="EA-header-bar">
    <div class="EA-col-img">
          <img src="https://image.flaticon.com/icons/svg/75/75804.svg" class="EA-header-image" />

    </div>
    <div class="EA-col-txt">
      <p class="EA-header-text">
        <b>YOUNG DRIVERS</b>
    </p>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

使用绝对定位的另一个例子

我认为这个更符合您的需求

＆＃13;

＆＃13;

.EA-header-bar {
    position: relative;
    display: flex;
    background-color: rgb(206,33,39);
    text-align: center;
    justify-content: center;
    align-items: center;
}
.EA-col-img {
  position: absolute;
  left: 5vw;
}
.EA-col-txt {
  flex:1
}
.EA-header-image {
    height:20vh;
}

.EA-header-text {
    color: white;
    font-size: 6vmin;
    font: bolder;
    font-family: kalinga;
}

＆＃13;

<div class="EA-header-bar">
    <div class="EA-col-img">
          <img src="https://image.flaticon.com/icons/svg/75/75804.svg" class="EA-header-image" />

    </div>
    <div class="EA-col-txt">
      <p class="EA-header-text">
        <b>YOUNG DRIVERS</b>
    </p>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;