这是我的新闻稿提交表单的代码段,我只想保持垂直居中的图标,该图标离其居中位置略有偏移。所以最后我想使图标保持居中状态。
.cm-subscription {
max-width: 100%;
display: block;
width: 400px;
}
@media (max-width: 768px) {
.cm-subscription {
max-width: 340px;
display: block;
padding-bottom: 20px;
margin: auto;
}
}
.cm-subscription form {
font-family: Arial;
border-radius: 2px;
}
.cm-subscription form button {
transition: all 0.3s ease-in-out;
border: none;
font-size: 25px;
padding: 10px 15px;
/*gradient*/
background: green;
/* fallback for old browsers */
color: #FFFFFF;
cursor: pointer;
}
.cm-subscription form button:hover {
background: #004d00;
}
.cm-subscription form button:focus {
outline: none;
}
.cm-flex {
align-items: center;
display: flex;
}
.cm-subscription form input {
padding: 7px 18px;
height: 43px;
border-radius: 2px;
font-family: Arial;
color: #a2aebb;
font-size: 15px;
border: 1px solid #ececec;
border-right: none;
width: 100%;
background: #ffffff;
}
.cm-subscription form input:focus {
outline: none;
}
<!--Footer Newsletter Subscription-->
<div class="cm-subscription">
<form autocomplete="off" action="/subscribe" method="post">
<div class="cm-flex">
<div style="flex: 1 1 0;">
<input type="email" name="email" placeholder="john@example.com" required>
</div>
<div style="margin-left: -20px;">
<button type="submit">⟶</button>
</div>
</div>
</form>
</div>
答案 0 :(得分:1)
我看到箭头表示您使用的是Unicode字符long rightwards arrow。就其本身而言,它不在文本行中垂直居中。当然,您可以尝试通过调整填充等来解决/作弊,但这不是可持续的解决方案(因为可能需要根据元素的高度和字体大小来调整填充)。相反,为什么不使用实际的图标,例如long-arrow-right中的font awesome:
std::vector
您可以在此codepen
中找到仅替换箭头的表单示例