CODEWITHSUNDEEP
htmlcsstext-alignment
Stubborn
Stubborn

Reputation: 968

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?

Upvotes: 0

Views: 64

Answers (4)

koorosh safeashrafi
koorosh safeashrafi

Reputation: 309

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>

or you can float left image an change padding left.

or you can vertical-align: middle for image good luck

Upvotes: 1

Sverri M. Olsen
Sverri M. Olsen

Reputation: 13283

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>

Upvotes: 1

Quentin
Quentin

Reputation: 943567

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.

Upvotes: 1

cptstarling
cptstarling

Reputation: 779

Try

.title img{
  vertical-align: middle;
}

Upvotes: 1

Related Questions