如何从图标高度中心垂直居中对齐文本
[英]How to center align text vertically from icon height center
问题描述
我试图让文本从图标的中心垂直开始，在那里我无法使用边距，任何指针来制作它。 下面是我正在使用的代码片段。
.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
您不需要float图标。 还要尽量避免内联样式并注意适当的缩进。
您可以使用display: flex;实现并排效果display: flex; 在.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
如果您知道容器的高度，则可以使用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
我不是 html 专业人士，但这可能是您问题的解决方案。 只需制作顶部容器、第二个容器和包含图像的 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
将图标垂直于文本第一行的中心对齐
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.