So richten Sie das Pfeilsymbol vertikal an der Mitte aus

Question

Ich möchte ein Pfeilsymbol (eingeklammert in einem <i>-Tag) so ausrichten, dass es in der Mitte der Schaltfläche (vertikal) ausgerichtet ist. Es funktioniert, wenn sich nur eine Textzeile in der Schaltfläche befindet, aber sobald der Text zwei Zeilen erreicht, ist die Ausrichtung des Pfeils deaktiviert. Wie behebe ich das? Jede Hilfe wird sehr geschätzt!

.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

den Code unten versuchen - sollte für Sie arbeiten. Ein paar Dinge zu beachten, die helfen könnten.

Wenn die maximale Breite wichtig ist, legen Sie Ihre Boxgröße fest, um die Ränder, Rahmen etc. hinzuzufügen.

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

Sie müssen nicht beide brauchen: vor und: nach

(nur die Schrift einmal erklären müssen) Wenn Sie SCSS verwenden würde ich eine Pseudo-Klasse und @extends verwenden, wie ich unten geschrieben. Hält Ihren HTML-Code sauber und vermeidet doppelten Code.

Best of Luck hoffe, es funktioniert für Sie!

.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"; }