How to center align text vertically from icon height center
Question
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 answers
solution1
1 ACCPTED 2018-09-05 17:43:49
You don't need to float the icon. Also try to avoid inline styles and pay attention to proper indentation.
You can achieve the side-by-side effect with display: flex; on the .topcontainer and the top offset with a padding on the .secondtopcontainer , that is half of the line height:
.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>
solution2
0 2018-09-05 17:40:18
If you know the height of the container, you can use the height + line-height combo
.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>
solution3
0 2018-09-05 18:02:14
I'm not a professional in html but this might be the solution to your problem. Just make the topcontainer, second container and the i element that contains the image float:left; and add a top margin to the i element that contains the 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>
Sorry in advance if I misunderstood your question. Scriptkiddie27
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.