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>

Answers


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

span{
  background-image: url("http://stubborn.altervista.org/options.png");
  background-repeat: no-repeat;
  background-position: center left;
  padding-left: 30px;
  cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
  <title> Material design!</title>
</head>
<body>  
  <div class="container">
  <div class="title"><span> Material design!</span></div>
  </div>
</body>
</html>

Try

.title img{
  vertical-align: middle;
}

You just need to vertically align the icon:

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;
}
.title img {
  vertical-align: middle;
}
<!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>

Need Your Help

how plugin works with inject and object instead of class in play 2.4

scala playframework playframework-2.4

I need to migrate the play mailer plugin for play 2.4.I checked some samples for play 2.4 and found that all the samples uses classes for plugin. I don't want to convert it to class. Is there any w...

Optimal image size for icon in Watch app table row

watchkit watch-os-2 wkinterfaceimage

What is the optimal/max image size for an icon in a Watch app table row, in order to avoid scaling of the original image?