Как выровнять текст по центру по вертикали от центра высоты иконки - PullRequest
Новая
       10

Как выровнять текст по центру по вертикали от центра высоты иконки

0 голосов
/ 05 сентября 2018

Пытаюсь сделать так, чтобы текст начинался с центра значка по вертикали, где я не могу сделать это, используя поля, любые указатели. ниже мой фрагмент кода, который я использую. enter image description here

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

Ответы [ 3 ]

0 голосов
/ 05 сентября 2018

Вам не нужно float значок. Также старайтесь избегать встроенных стилей и обращайте внимание на правильные отступы.

Вы можете добиться эффекта рядом с display: flex; на .topcontainer и верхним смещением с padding на .secondtopcontainer, то есть половина высоты строки:

enter image description here

.topcontainer {
  display: flex;
}

.secondtopcontainer {
  padding: .75em;
  line-height: 1.5em;
}

.icon-color {
  color: green;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="topcontainer">
  <i class="fa fa-minus-circle fa-3x icon-color"></i>
  <div class="secondtopcontainer">
    <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. This Text should start from center of the Icon height. This Text should start from center of the Icon height.</span>
  </div>
</div>
0 голосов
/ 05 сентября 2018

Это то, что вы имеете в виду?

Я не профессионал в области html, но это может стать решением вашей проблемы. Просто сделайте topcontainer, второй контейнер и элемент i, который содержит изображение float: left; и добавьте верхнее поле к элементу i, который содержит img. 

	.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

0 голосов
/ 05 сентября 2018

Если вы знаете высоту контейнера, вы можете использовать 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>
...