如何將箭頭圖標垂直對齊到中心

Question

我想對齊箭頭圖標（包裹在<i>標記中）以與按鈕的中心對齊（垂直）。它在按鈕中只有一行文本的情況下工作，但只要文本到達兩行，箭頭的對齊關閉。我該如何解決？任何幫助深表感謝！

.btn-container { 
 
\t margin: 2% 0; 
 
\t max-width:350px; 
 
} 
 

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

 
.btn-rectangle p { 
 
\t color:#fff; 
 
\t text-align:left; 
 
} 
 

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

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

 
.flaticon-move13 { 
 
\t padding-left: 10px; 
 
\t font-size:1.2em; 
 
\t font-weight:bold; 
 
} 
 
.move-right { 
 
\t float:right; 
 
} 
 

 
@font-face { 
 
\t font-family: "Flaticon"; 
 
\t src: url("flaticon.eot"); 
 
\t src: url("flaticon.eot#iefix") format("embedded-opentype"), 
 
\t url("flaticon.woff") format("woff"), 
 
\t url("flaticon.ttf") format("truetype"), 
 
\t url("flaticon.svg") format("svg"); 
 
\t font-weight: normal; 
 
\t font-style: normal; 
 
} 
 
[class^="flaticon-"]:before, [class*=" flaticon-"]:before, 
 
[class^="flaticon-"]:after, [class*=" flaticon-"]:after { 
 
\t font-family: Flaticon; 
 
font-style: normal; 
 
}.flaticon-arrow395:before { 
 
\t content: "\e000"; 
 
} 
 
.flaticon-bottom4:before { 
 
\t content: "\e001"; 
 
} 
 
.flaticon-move13:before { 
 
\t 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>

Answer 1

嘗試下面的代碼 - 應爲你工作。有幾件事要注意，可能會有所幫助。

如果最大寬度很重要，請將您的方框大小設置爲 以包含邊距，邊框等。

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

你不需要兩個：前：後（只需一次申報的字體）如果你使用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"; }