将 svg 图标与文本对齐

Question

抱歉，我不太擅长 html 和 css。 帮助我如何使图标紧跟在文本之后？

我尝试了很多东西，但很可能它对我不起作用，因为我第一次以这种方式加载 svg 图标，我不知道那里有什么以及如何

 .top-button-blog { z-index: 999; transition: opacity 0.5s; cursor: pointer; padding: 5px; position: fixed; top: 50%; } .top-button-blog__text { z-index: 999; text-transform: uppercase; height: 26px; width: 80px; color: #92969E; font-size: 10px; font-weight: bold; letter-spacing: 0; line-height: 26px; text-align: left; } .top-button-blog__image { margin-bottom: 20px; }

 <div class="top-button-blog"> <div class="top-button-blog__text">To top <div class="top-button-blog__image"> <svg width="16px" height="16px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-80.000000, -1224.000000)" fill="#808694"> <g transform="translate(40.000000, 1184.000000)"> <g transform="translate(0.000000, 40.000000)"> <g transform="translate(40.000000, 0.000000)"> <path d="M11.2928932,4.29289319 C11.6834175,3.9023689 12.3165825,3.9023689 12.7071068,4.29289319 L12.7071068,4.29289319 L19.7071068,11.2928932 C19.7355731,11.3213595 19.7623311,11.3515341 19.787214,11.3832499 C19.7927155,11.3901576 19.7982466,11.3973969 19.8036654,11.4046934 C19.8215099,11.4288693 19.8382813,11.453725 19.8539325,11.4793398 C19.8613931,11.4913869 19.8685012,11.5036055 19.8753288,11.5159379 C19.8862061,11.5357061 19.8966233,11.5561086 19.9063462,11.5769009 C19.914321,11.5939015 19.9218036,11.6112043 19.9287745,11.6286639 C19.9366842,11.6484208 19.9438775,11.6682023 19.9504533,11.6882636 C19.9552713,11.7031486 19.9599023,11.7185367 19.9641549,11.734007 C19.9701663,11.7555635 19.9753602,11.7772539 19.9798348,11.7992059 C19.9832978,11.8166247 19.9863719,11.834051 19.9889822,11.8515331 C19.9962388,11.8996379 20,11.9493797 20,12 L19.9962979,11.9137692 C19.9978436,11.9317345 19.9989053,11.9497336 19.9994829,11.9677454 L20,12 C20,12.0112225 19.9998151,12.0224019 19.9994483,12.0335352 C19.9988772,12.0505909 19.997855,12.0679231 19.996384,12.0852242 C19.994564,12.1070574 19.992094,12.1281144 19.9889806,12.1489612 C19.9863719,12.165949 19.9832978,12.1833752 19.9797599,12.2007257 C19.9753602,12.2227461 19.9701663,12.2444365 19.964279,12.2658396 C19.9599023,12.2814632 19.9552713,12.2968513 19.9502619,12.3121425 C19.9438775,12.3317977 19.9366842,12.3515792 19.928896,12.3710585 C19.9218036,12.3887956 19.914321,12.4060985 19.9063266,12.4232215 C19.8966233,12.4438914 19.8862061,12.4642939 19.8751242,12.4842769 C19.8685012,12.4963944 19.8613931,12.5086131 19.8540045,12.5207087 C19.8382813,12.5462749 19.8215099,12.5711307 19.8036865,12.5951593 C19.774687,12.6343256 19.7425008,12.6717127 19.7071068,12.7071068 L19.787214,12.6167501 C19.7849288,12.6196628 19.7826279,12.6225624 19.7803112,12.625449 L19.7071068,12.7071068 L12.7071068,19.7071068 C12.3165825,20.097631 11.6834175,20.097631 11.2928932,19.7071068 C10.9023689,19.3165825 10.9023689,18.6834175 11.2928932,18.2928932 L11.2928932,18.2928932 L16.585,13 L4.99999997,13 C4.48716413,13 4.06449281,12.6139598 4.0067277,12.1166211 L3.99999997,12 C3.99999997,11.4477152 4.44771522,11 4.99999997,11 L4.99999997,11 L16.585,11 L11.2928932,5.70710675 C10.9324093,5.34662279 10.9046797,4.77939173 11.2097046,4.38710053 Z" id="icon-color"></path> </g> </g> </g> </g> </g> </svg> </div> </div> </div>

Answer 1

像这样？

我添加了display: flex; 和align-items: center; 到top-button-blog__text和top-button-blog__image 。
还删除了margin-bottom: 20px; 来自top-button-blog__image

 .top-button-blog { z-index: 999; transition: opacity 0.5s; cursor: pointer; padding: 5px; position: fixed; top: 50%; } .top-button-blog__text { z-index: 999; text-transform: uppercase; height: 26px; width: 80px; color: #92969E; font-size: 10px; font-weight: bold; letter-spacing: 0; line-height: 26px; text-align: left; display: flex; align-items: center; gap: 10px; } .top-button-blog__image { display: flex; align-items: center; }

 <div class="top-button-blog"> <div class="top-button-blog__text">To top <div class="top-button-blog__image"> <svg width="16px" height="16px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-80.000000, -1224.000000)" fill="#808694"> <g transform="translate(40.000000, 1184.000000)"> <g transform="translate(0.000000, 40.000000)"> <g transform="translate(40.000000, 0.000000)"> <path d="M11.2928932,4.29289319 C11.6834175,3.9023689 12.3165825,3.9023689 12.7071068,4.29289319 L12.7071068,4.29289319 L19.7071068,11.2928932 C19.7355731,11.3213595 19.7623311,11.3515341 19.787214,11.3832499 C19.7927155,11.3901576 19.7982466,11.3973969 19.8036654,11.4046934 C19.8215099,11.4288693 19.8382813,11.453725 19.8539325,11.4793398 C19.8613931,11.4913869 19.8685012,11.5036055 19.8753288,11.5159379 C19.8862061,11.5357061 19.8966233,11.5561086 19.9063462,11.5769009 C19.914321,11.5939015 19.9218036,11.6112043 19.9287745,11.6286639 C19.9366842,11.6484208 19.9438775,11.6682023 19.9504533,11.6882636 C19.9552713,11.7031486 19.9599023,11.7185367 19.9641549,11.734007 C19.9701663,11.7555635 19.9753602,11.7772539 19.9798348,11.7992059 C19.9832978,11.8166247 19.9863719,11.834051 19.9889822,11.8515331 C19.9962388,11.8996379 20,11.9493797 20,12 L19.9962979,11.9137692 C19.9978436,11.9317345 19.9989053,11.9497336 19.9994829,11.9677454 L20,12 C20,12.0112225 19.9998151,12.0224019 19.9994483,12.0335352 C19.9988772,12.0505909 19.997855,12.0679231 19.996384,12.0852242 C19.994564,12.1070574 19.992094,12.1281144 19.9889806,12.1489612 C19.9863719,12.165949 19.9832978,12.1833752 19.9797599,12.2007257 C19.9753602,12.2227461 19.9701663,12.2444365 19.964279,12.2658396 C19.9599023,12.2814632 19.9552713,12.2968513 19.9502619,12.3121425 C19.9438775,12.3317977 19.9366842,12.3515792 19.928896,12.3710585 C19.9218036,12.3887956 19.914321,12.4060985 19.9063266,12.4232215 C19.8966233,12.4438914 19.8862061,12.4642939 19.8751242,12.4842769 C19.8685012,12.4963944 19.8613931,12.5086131 19.8540045,12.5207087 C19.8382813,12.5462749 19.8215099,12.5711307 19.8036865,12.5951593 C19.774687,12.6343256 19.7425008,12.6717127 19.7071068,12.7071068 L19.787214,12.6167501 C19.7849288,12.6196628 19.7826279,12.6225624 19.7803112,12.625449 L19.7071068,12.7071068 L12.7071068,19.7071068 C12.3165825,20.097631 11.6834175,20.097631 11.2928932,19.7071068 C10.9023689,19.3165825 10.9023689,18.6834175 11.2928932,18.2928932 L11.2928932,18.2928932 L16.585,13 L4.99999997,13 C4.48716413,13 4.06449281,12.6139598 4.0067277,12.1166211 L3.99999997,12 C3.99999997,11.4477152 4.44771522,11 4.99999997,11 L4.99999997,11 L16.585,11 L11.2928932,5.70710675 C10.9324093,5.34662279 10.9046797,4.77939173 11.2097046,4.38710053 Z" id="icon-color"></path> </g> </g> </g> </g> </g> </svg> </div> </div> </div>