Html 如何在表单中对齐SVG按钮

我尝试创建一个包含两个输入和一个按钮的表单。我宁愿使用SVG而不是文本按钮，但它没有正确对齐

假设使用以下CSS和HTML：

正文{
背景：#222；
利润率：25px；
}
形式{
边框：1px实心#444；
填充：2px；
}
输入{
边框：1px实心透明；
背景：#444；
颜色：#ddd；
左边距：6px；
填充物：3px 5px；
}
输入：焦点{
大纲：0；
边框：1px实心#666；
}
钮扣{
边界：0；
填充：0；
背景：透明；
左边距：6px；
高度：23px；
宽度：23px；
填充：#bbb；
}
按钮：焦点{
大纲：0；
填充：#ddd；
}

---

您需要将

按钮本身与
输入旁边对齐。我们在
表单中的每个元素上使用
垂直对齐：middle
，以实现相同的目标


正文{
背景：#222；
利润率：25px；
}
形式{
边框：1px实心#444；
填充：2px；
}
表格*{
垂直对齐：中间对齐；
}
输入{
边框：1px实心透明；
背景：#444；
颜色：#ddd；
左边距：6px；
填充物：3px 5px；
}
输入：焦点{
大纲：0；
边框：1px实心#666；
}
钮扣{
边界：0；
显示：内联块；
填充：0；
背景：透明；
左边距：6px；
高度：23px；
宽度：23px；
填充：#bbb；
}
按钮：焦点{
大纲：0；
填充：#ddd；
}
您需要将
按钮本身与
输入旁边对齐。我们在
表单中的每个元素上使用
垂直对齐：middle
，以实现相同的目标


正文{
背景：#222；
利润率：25px；
}
形式{
边框：1px实心#444；
填充：2px；
}
表格*{
垂直对齐：中间对齐；
}
输入{
边框：1px实心透明；
背景：#444；
颜色：#ddd；
左边距：6px；
填充物：3px 5px；
}
输入：焦点{
大纲：0；
边框：1px实心#666；
}
钮扣{
边界：0；
显示：内联块；
填充：0；
背景：透明；
左边距：6px；
高度：23px；
宽度：23px；
填充：#bbb；
}
按钮：焦点{
大纲：0；
填充：#ddd；
}


只需添加垂直对齐：中间到您的选择器


正文{
背景：#222；
利润率：25px；
}
形式{
边框：1px实心#444；
填充：2px；
}
输入{
边框：1px实心透明；
背景：#444；
颜色：#ddd；
左边距：6px；
填充物：3px 5px；
}
输入：焦点{
大纲：0；
边框：1px实心#666；
}
钮扣{
边界：0；
填充：0；
背景：透明；
左边距：6px；
高度：23px；
宽度：23px；
填充：#bbb；
/*只需将这条线添加到目标元素，使其在中间对齐即可*/
垂直对齐：中间对齐；
}
svg{margin:auto；}
按钮：焦点{
大纲：0；
填充：#ddd；
}


只需添加垂直对齐：中间到您的选择器


正文{
背景：#222；
利润率：25px；
}
形式{
边框：1px实心#444；
填充：2px；
}
输入{
边框：1px实心透明；
背景：#444；
颜色：#ddd；
左边距：6px；
填充物：3px 5px；
}
输入：焦点{
大纲：0；
边框：1px实心#666；
}
钮扣{
边界：0；
填充：0；
背景：透明；
左边距：6px；
高度：23px；
宽度：23px；
填充：#bbb；
/*只需将这条线添加到目标元素，使其在中间对齐即可*/
垂直对齐：中间对齐；
}
svg{margin:auto；}
按钮：焦点{
大纲：0；
填充：#ddd；
}

一个简单的解决方案：添加
表单{display:flex}
并确保svg和输入具有相同的高度；不适用于所有设备我不推荐它。一个简单的解决方案：添加
表单{display:flex}
，确保svg和输入具有相同的高度；不会在所有设备上工作我不推荐它。