Question

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

＆＃13;

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

＆＃13;

                <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>

＆＃13;

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

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

1 个答案: