Q:

Text not aligned with image

Scenario
I've got the following code:

html body{
 font-family:Arial,Verdana,Geneva;
 background-color:white;
}
.title{
 background-color:red;
 color:white;
 position:fixed;
 top:0;
 left:0;
 width:100%;
 line-height:30px;
 padding-top: 10px;
 padding-bottom: 10px;
 padding-left: 10px;
 box-shadow: 0px 4px 4px 0px grey;
}
<!DOCTYPE html>
<html>
<head>
  <title> Material design!</title>
</head>
<body>  
  <div class="container">
  <div class="title"><img src='http://stubborn.altervista.org/options.png'> Material design!</div>
  </div>
</body>
</html>

What the code should do
Displaying a fixed header with the title "Material Design!" and an icon
What isn't working
Text and icon are not aligned
My question
How can I solve this problem?

A:

As you can see if you add a yellow outline to the image, they are aligned. The bottom of the image sits on the same line as the text.

html body{
 font-family:Arial,Verdana,Geneva;
 background-color:white;
}
.title{
 background-color:red;
 color:white;
 position:fixed;
 top:0;
 left:0;
 width:100%;
 line-height:30px;
 padding-top: 10px;
 padding-bottom: 10px;
 padding-left: 10px;
 box-shadow: 0px 4px 4px 0px grey;
}

img { outline: solid yellow 1px; }
<!DOCTYPE html>
<html>
<head>
  <title> Material design!</title>
</head>
<body>  
  <div class="container">
  <div class="title"><img src='http://stubborn.altervista.org/options.png'> Material design!</div>
  </div>
</body>
</html>

You can adjust that with vertical-align:

html body{
 font-family:Arial,Verdana,Geneva;
 background-color:white;
}
.title{
 background-color:red;
 color:white;
 position:fixed;
 top:0;
 left:0;
 width:100%;
 line-height:30px;
 padding-top: 10px;
 padding-bottom: 10px;
 padding-left: 10px;
 box-shadow: 0px 4px 4px 0px grey;
}

img { outline: solid yellow 1px; vertical-align: top; }
<!DOCTYPE html>
<html>
<head>
  <title> Material design!</title>
</head>
<body>  
  <div class="container">
  <div class="title"><img src='http://stubborn.altervista.org/options.png'> Material design!</div>
  </div>
</body>
</html>

… but ultimately you'll probably want to edit the image to adjust the amount of whitespace it has in it.

