put a div in center and align an image to its “left” side

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>

I am trying to put the "Title" in center and then place the logo, next to it in the left side of it.

The title name would be dynamic so it should always be at the center irrespective of length

Answer 1

Change CSS

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

.logo {
  width: 55px;
  float:left;
  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;
}

http://jsfiddle.net/d902fzyn/

Answer 2

Try

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;
}

Answer 3

Is this how you want it to be?

 .container { padding: 15px 15px 20px 15px; height: 247px; width: 780px; border-radius: 5px; margin-bottom: 30px; background-color: #2D343D; position: relative; } .logo { width: 55px; vertical-align: bottom; } .header { height: 56px; color: #FFFFFF; margin-top: 15px; font-size: 29.98px; letter-spacing: 0.43px; line-height: 40px; text-align: center; position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); } 

 <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>