文字与图片不对齐

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!" 和图标

的固定 header

什么不起作用

文本和图标未对齐

我的问题

我该如何解决这个问题？

Answer 1

尝试

.title img{
  vertical-align: middle;
}

Answer 2

如您所见，如果您向图像添加黄色轮廓，它们就会对齐。图片底部与文字位于同一行。

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>

您可以使用 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>

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

Answer 3

你只需要垂直对齐图标：

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>

Answer 4

您可以使用此代码

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: 中间的图片祝你好运

文字与图片不对齐

Text not aligned with image

html

css

text-alignment

场景

代码应该做什么

什么不起作用

我的问题