如何从图标高度中心垂直居中对齐文本
[英]How to center align text vertically from icon height center
问题描述
Am trying to make the text start from the center of the icon vertically, where am not able to make it using margin, any pointers.
我试图让文本从图标的中心垂直开始，在那里我无法使用边距，任何指针来制作它。 below is my code snippet that am using.下面是我正在使用的代码片段。
.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 个解决方案
解决方案1
1 已采纳 2018-09-05 17:43:49
You don't need to float the icon.您不需要float图标。 Also try to avoid inline styles and pay attention to proper indentation.还要尽量避免内联样式并注意适当的缩进。
You can achieve the side-by-side effect with display: flex;您可以使用display: flex;实现并排效果display: flex; on the .topcontainer and the top offset with a padding on the .secondtopcontainer , that is half of the line height:在.topcontainer和顶部与偏移padding在.secondtopcontainer ，即行高度的一半：
.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>
解决方案2
0 2018-09-05 17:40:18
If you know the height of the container, you can use the height + line-height combo如果您知道容器的高度，则可以使用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>
解决方案3
0 2018-09-05 18:02:14
Is this what you mean?你是这个意思吗？
I'm not a professional in html but this might be the solution to your problem.我不是 html 专业人士，但这可能是您问题的解决方案。 Just make the topcontainer, second container and the i element that contains the image float:left;只需制作顶部容器、第二个容器和包含图像的 i 元素 float:left; and add a top margin to the i element that contains the img.并为包含 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>
Sorry in advance if I misunderstood your question.如果我误解了您的问题，请提前道歉。 Scriptkiddie27 Scriptkiddie27
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.