Question

我试图使文本从图标的中心垂直开始，在此处不能使用边距（任何指针）。以下是我正在使用的代码段。

.topcontainer{
	text-align: left;
	}
	.secondtopcontainer{
    vertical-align: top;
    padding-top: 55px;
    line-height: 1.5em;
    display: inline;
	}
	
	.icon-color{
	color: green;
	}

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="topcontainer">
   <i class="far fa-minus-circle fa-3x icon-color" style="float: left;"></i>
   <div class="secondtopcontainer" style="margin-top: 43px;">
   <span class="icon-color">This TExt should start from center of the Icon height.This TExt should start from center of the Icon height.This TExt should start from center of the Icon height.</span>
   </div>
</div>
</body>
</html>

Answer 1

您不需要float图标。另外，请尽量避免使用内联样式，并注意适当的缩进。

您可以在.topcontainer上使用display: flex;并在{{1}上使用padding来实现并排效果}，即行高的一半：

.secondtopcontainer

.topcontainer {
  display: flex;
}

.secondtopcontainer {
  padding: .75em;
  line-height: 1.5em;
}

.icon-color {
  color: green;
}

Answer 2

如果知道容器的高度，则可以使用height + line-height组合

.topcontainer{
	text-align: left;
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
	}
	.secondtopcontainer{

	}
	
	.icon-color{
	color: green;
	}

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="topcontainer">
   <i class="far fa-minus-circle fa-3x icon-color" style="float: left;"></i>
   <div class="secondtopcontainer" style="margin-top: 43px;">
   <span class="icon-color">This TExt should start from center of the Icon height.This TExt should start from center of the Icon height.This TExt should start from center of the Icon height.</span>
   </div>
</div>
</body>
</html>

Answer 3

Is this what you mean?

我不是html专业人士，但这可能是解决您的问题的方法。只需将topcontainer，第二个容器和包含图像的i元素设置为float：left;即可。并在包含img的i元素上添加一个上边距。

	.topcontainer {
		text-align: left;
		float:left;
		border:1px solid black;
	}
	.secondtopcontainer {
		float:left;
		color:black;
	}
	i.icon {
	float:left;
	margin-top:7px;
	}

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div class="topcontainer">
   <i class="icon"> <img src="http://icons.iconarchive.com/icons/blackvariant/button-ui-system-apps/1024/Terminal-icon.png" height="32" width="32""> </i>
   <div class="secondtopcontainer">
   <p class="icon">This TExt should start from center of the Icon height.This TExt should start from center of the Icon height.This TExt should start from center of the Icon height.</p>
   </div>
</div>
</body>
</html>

对不起，如果我误解了您的问题。 Scriptkiddie27

如何从图标高度中心垂直居中对齐文本

3 个答案: