Question

方案

我有以下代码：

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>

代码应该做什么

显示标题为“Material Design！”的固定标题和一个图标

什么不起作用

文字和图标未对齐

我的问题

我该如何解决这个问题？

Answer 1

您可以使用此代码

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>

或者您可以float向左移动图片padding。

或者您可以vertical-align：图像的中间位置祝你好运

Answer 2

尝试

.title img{
  vertical-align: middle;
}

Answer 3

正如您所看到的，如果您为图像添加黄色轮廓，它们会对齐。图像的底部与文本位于同一行。

＆＃13;

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

＆＃13;

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

＆＃13;

您可以使用vertical-align：

进行调整

＆＃13;

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

＆＃13;

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

＆＃13;

...但最终您可能想要编辑图像以调整其中的空白量。

Answer 4

您只需垂直对齐图标：

＆＃13;

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

＆＃13;

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

＆＃13;

文字未与图像对齐

方案

代码应该做什么

什么不起作用

我的问题

4 个答案: