html - 将一个 div 放在中心并将图像与其 "left"侧对齐

Question

Here is the demo code

<div class="container">
 <div class="header">
    <img class="logo" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"/>
     <span class="text">Title Here</span>
  </div>
</div>

我试图将“标题”放在中间，然后将 Logo 放在它旁边的左侧。

标题名称将是动态的，因此无论长度如何，它都应始终位于中心

Answer 1

尝试

this demo

.container{
    padding: 15px 15px 20px 15px;
    height: 247px;
    width: 780px;
    border-radius: 5px;
    margin-bottom: 30px;
    background-color: #2D343D;
}

.logo {
  width: 55px;
  vertical-align:middle;
}

.header {
        height: 56px;
        color: #FFFFFF;
        margin-top: 15px;
        font-size: 29.98px;
        letter-spacing: 0.43px;
        line-height: 40px;
        text-align: center;
        position: relative;
}