css - 带有 :before & :after pseudo classes styled in CSS to display as a complete block 的按钮链接

Question

我在做噩梦，我有一个非常简单的前提，它在占用一行时工作正常......

http://imgur.com/dKtkJQs,vFJvW7c#0 <-- 它应该是这样的

但是，如果它位于较窄的列中并跨越两行，+ 和 > 就不想垂直居中对齐。

http://imgur.com/dKtkJQs,vFJvW7c#1 <-- 这是超过两行时的样子，不是我想要的结果

出于某种原因，当 fiddle 不在我的代码中时，它有 :before 重叠。但我的主要观点是，如何让 + 和 > 在中间垂直对齐？我想我把头发都扯光了。

HTML代码

<a href="#" class="create bttn">CREATE 1st UNIT</a>

CSS代码

body {
font-family: 'Open Sans', 'sans-serif';
padding: 20px;
padding-top: 50px;
background-color: #CCCCCC;
font-weight: 100;
font-size: 12px;
text-align: center;
}
.bttn{
position: relative;
display: block;
margin-top: 3px;
padding: 5px 10px 5px 40px;
background: #1E90FF;
font-size: 18px;
color: #ffffff;
font-weight: 700;
text-decoration: none;
}
.bttn::before{
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto;
height: 100%;
padding: 5px 10px 5px 10px;
content: "+";
background: #104E8B;
font-size: 18px;
font-weight: 500;
}
.bttn:after{
position: absolute;
top: 0;
right: 0;
bottom: 0;
height: 100%;
padding: 5px 10px 5px 10px;
float: right;
content: ">";
font-weight: 500;
}
.create, .create::before, .create::after{
font-size: 10px;
}
.create{
padding-left: 20px;
}
.create::before, .create-coffer::after{
padding: 5px 5px 5px 5px;   
}

Answer 1

在处理响应式元素时，垂直对齐很困难。我的建议是“加号”和“箭头”图标是伪元素的背景图像。这样您就可以将它们对齐到准确的中心。

否则，您可以使用翻译技巧垂直对齐元素。但是你还需要深蓝色背景作为绝对定位的 span 元素。

    top: 50%;
    transform: translateY(-50%);