如何将箭头图标垂直对齐到中心

Posted 2023-03-05

【中文标题】如何将箭头图标垂直对齐到中心

【英文标题】：How to vertically align arrow icon to the center

【发布时间】：2016-08-13 23:52:50

【问题描述】：

我想将箭头图标（包裹在<i> 标签中）对齐到按钮的中心（垂直）。当按钮中只有一行文本时它可以工作，但是一旦文本到达两行，箭头的对齐就会关闭。我该如何解决？非常感谢任何帮助！

.btn-container 
	margin: 2% 0;
	max-width:350px;


.btn-container a 
	text-decoration:none;
	color:#5A469B;
	font-size:1.2em;
	text-align:left;
	line-height:1.2;
	padding-left:20px;


.btn-rectangle p 
	color:#fff;
	text-align:left;


.btn-rectangle 
	background-color:#fff;
	border: solid 3px #5A469B;
	padding:8% 5%;
    display:block;
	width:100%;
	text-transform:capitalize;


.btn-rectangle:hover 
	background-color:#5A469B;
	color:#fff;
	border:solid 3px #5A469B;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;


.flaticon-move13 
	padding-left: 10px;
	font-size:1.2em;
	font-weight:bold;

.move-right  
	float:right;


@font-face 
	font-family: "Flaticon";
	src: url("flaticon.eot");
	src: url("flaticon.eot#iefix") format("embedded-opentype"),
	url("flaticon.woff") format("woff"),
	url("flaticon.ttf") format("truetype"),
	url("flaticon.svg") format("svg");
	font-weight: normal;
	font-style: normal;

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after    
	font-family: Flaticon;
font-style: normal;
.flaticon-arrow395:before 
	content: "\e000";

.flaticon-bottom4:before 
	content: "\e001";

.flaticon-move13:before 
	content: "\e002";

                <div class="btn-container">
                    <a href="#" class="btn-rectangle">the square represents the arrow. Once it's two lines of text it isn't aligned.
                    <i class="move-right flaticon-move13"></i></a>
                </div>

【参考方案1】：

试试下面的代码——应该适合你。需要注意的一些事项可能会有所帮助。

如果最大宽度很重要，请设置框大小 要包括边距、边框等，请添加此内容。

*:after, *:before 
box-sizing: border-box;

你不需要同时使用:before和:after（只需要声明一次字体）

如果你使用 SCSS，我会使用伪类和 @extends，就像我在下面发布的那样。保持您的 html 整洁并有助于避免重复代码。

祝你好运，希望它对你有用！

.btn-container 
  margin: 2% 0;
  max-width: 350px;

.btn-container a 
  text-decoration: none;
  color: #5A469B;
  font-size: 1.2em;
  text-align: left;
  line-height: 1.2;
  /* padding-left: 20px; */

.btn-rectangle p 
  color: #fff;
  text-align: left;

.btn-rectangle 
  background-color: #fff;
  border: solid 3px #5A469B;
  padding: 8% 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  text-transform: capitalize;
  width: 100%;

.btn-rectangle:hover 
  background-color: #5A469B;
  color: #fff;
  border: solid 3px #5A469B;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;

.flaticon-move13 
  font-size: 1.2em;
  font-weight: bold;

/*/
 //
 //Goodbye Floats -- Flexbox FTW
 --------------------------------- */

/*.move-right  */

/*//float:right;*/

/**/

@font-face 
  font-family: "Flaticon";
  src: url("flaticon.eot");
  src: url("flaticon.eot#iefix") format("embedded-opentype"), url("flaticon.woff") format("woff"), url("flaticon.ttf") format("truetype"), url("flaticon.svg") format("svg");
  font-weight: normal;
  font-style: normal;

[class^="flaticon-"]:before,
[class*=" flaticon-"]:before,
[class^="flaticon-"]:after,
[class*=" flaticon-"]:after 
  font-family: Flaticon;
  font-style: normal;

.flaticon-arrow395:before 
  content: "\e000";

.flaticon-bottom4:before 
  content: "\e001";

.flaticon-move13:before 
  content: "\e002";

<div class="btn-container">
    <a href="#" class="btn-rectangle">the square represents the arrow. Once it's two lines of text it isn't aligned.
        <i class="flaticon-move13"></i>
    </a>
</div>

// SCSS Example
     %flaticons 
            font-family: 'Flaticon';
            font-style: normal;
            letter-spacing: normal;
            word-wrap: normal;
            white-space: nowrap;
            direction: ltr;
            -webkit-font-smoothing: antialiased;
            speak: none;
            text-rendering: optimizeLegibility;
            -moz-osx-font-smoothing: grayscale;
        

         .icon-arrow 
          @extend %flaticons;

          &:after 
            content: "\e000";
          
        

             .icon-bottom 
          @extend %flaticons;

          &:after 
            content: "\e001";
          
        
    // ======================================================
    // Renders to
     .icon-arrow, .icon-bottom, .icon-movel 
          font-family: 'Flaticon';
            font-style: normal;
            letter-spacing: normal;
            word-wrap: normal;
            white-space: nowrap;
            direction: ltr;
            -webkit-font-smoothing: antialiased;
            speak: none;
            text-rendering: optimizeLegibility;
            -moz-osx-font-smoothing: grayscale;
     

    .icon-arrow:after  content: "\e000"; 
    .icon-bottom:after  content: "\e001"; 
    .icon-bottom:after  content: "\e002";