如何为包含input[type="color"]的按钮设置样式并实现文本与颜色输入框垂直居中对齐

这个问题我碰到过好多次啦，核心原因是<input type="color">作为行内元素，默认和文本的基线对齐，这就导致视觉上文本看起来偏下，和颜色选择器不在同一水平线上。给你两种简单靠谱的解决方案：

方案一：用Flex布局（推荐，适配性强） #

直接给按钮添加Flex相关属性，让内部元素自动垂直居中，还能轻松控制元素间距：

修改按钮的CSS代码，添加以下属性：

button{ 
  outline: none; 
  background: #cccccc; 
  border: 2px solid #efefef; 
  padding: .6rem 1rem; 
  margin-left: 1rem; 
  border-radius: 3px; 
  font-weight: 600; 
  /* 新增Flex相关属性 */
  display: inline-flex;
  align-items: center;
  /* 可选：控制文本和颜色选择器的间距，让布局更美观 */
  gap: 0.5rem;
}

Flex布局是现代前端的首选方案，不仅能解决垂直居中问题，后续如果按钮内要加其他元素，扩展起来也很方便。

方案二：调整行内元素的垂直对齐 #

如果不想用Flex，也可以直接给颜色选择器设置垂直对齐方式，快速解决基线对齐的问题：

给input[type="color"]添加vertical-align: middle属性：

input[type="color"] { 
  -webkit-appearance: none; 
  border: none; 
  border-radius: 50%; 
  width: 20px; 
  height: 20px; 
  /* 新增垂直对齐属性 */
  vertical-align: middle;
}

这种方法代码量更少，适合简单的行内元素对齐场景。

完整代码示例（Flex版本） #

CSS代码：

button{ 
  outline: none; 
  background: #cccccc; 
  border: 2px solid #efefef; 
  padding: .6rem 1rem; 
  margin-left: 1rem; 
  border-radius: 3px; 
  font-weight: 600; 
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
input[type="color"] { 
  -webkit-appearance: none; 
  border: none; 
  border-radius: 50%; 
  width: 20px; 
  height: 20px; 
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }

HTML代码：

<button class="strokecolor">Choose a color <input type="color" value='#1a1a1a'> </button>

内容的提问来源于stack exchange，提问作者Avatar