html - 居中 Flexbox 时事通讯提交图标
问题描述
这是我的时事通讯提交表单的代码片段,我只想保持垂直居中的图标,该图标与其中心位置有点偏移。所以最后我想保持图标流动中心。
.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>
解决方案
我可以看到,对于箭头,您使用的是 unicode 字符longwards arrow。它本身并不垂直居中在文本行中。当然,您可以尝试通过调整填充等来解决/作弊,但这不是一个可持续的解决方案(因为可能需要根据元素高度和字体大小调整填充)。相反,为什么不使用实际的图标,例如font awesome的long-arrow-right:
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
可以在此代码笔中找到仅替换箭头的表单示例
推荐阅读
- java - InterruptedException、API 设计和泄漏抽象
- spring-boot - layout.js - PrimeFaces.widget.Avalon 未调用
- search - 需要递归循环退出语句
- android - Android:我的 Activity 重启后如何恢复 WebView 内容?
- iphone - 如何使用蓝牙测量两个 iphone 设备之间的近距离?
- android - 根据字体大小对所有 TextView 使用 paddingBottom
- spatstat - spatstat 中网络上的等级分离和最短路径
- c# - 在 .Net Core 3.1 上运行时,托管 IBM MQ .Net Client v9.1.4 在通过 SSL 获取时冻结
- python - 在节点 js 中调用 python 脚本 => ERR_HTTP_HEADERS_SENT
- ruby - 我可以捕获错误并继续下一个 Rake 任务吗?