Html 与其他div内容相比，输入文本需要更垂直对齐

我已经创建了一些芯片/标签，旁边有一个输入元素

芯片内文本的垂直方向不同于输入元素内文本的垂直方向。“输入新客户名称”稍微高一点或更顶部对齐

我如何在不使用padding top:3px等黑客的情况下修复此问题

我想规范化输入中的文本方向，因为在我看来，输入中的文本本身也没有在该输入中垂直居中，还是我错了

我该怎么做

HTML

---

在css class.md芯片输入中，尝试通过“padding top”来实现这一点

`

---

我还建议在代码中添加一个小的页边空白

进行以下调整：

.d-flex {
   display: flex;
   align-items: baseline; /* NEW */
}

详情如下：

---

在我最新的chrome浏览器中，我看不出您修改后的codepen有什么不同？在发布答案之前，我在chrome和FF上对其进行了测试。它起到了不同的作用，把文本排成一行。只是在家里测试了一下。可能是办公室中较旧的chrome版本；-）谢谢Michael，align items是正确的，也是唯一一个在这里人们应该接受的解决方案，没有边距/填充顶部hacks。也可以在Edge浏览器中使用，但在IE 11中，md芯片输入只有芯片高度的一半，但这可以用明确的高度固定：34px；与线高度相同：34px；：-）

.md-chip {
     display: flex;    
    letter-spacing: 0.05rem;
    color: #444;
    border-radius: 16px;
    transition: all 0.3s;
    margin: 0.1rem 0.3rem 0.1rem 0;
    padding: 0.08rem 1rem;

    line-height: 34px;
    background: #efefef;
    user-select: none;
     outline: 0;
    cursor: pointer;
    position: relative;
}

.md-chips-container
{
  padding-bottom:5px;
  border-bottom:2px solid #efefef;
}

.md-chips-container:focus
{
  border-bottom:2px solid #2196F3;
}

.md-chip-text{
  margin-right:10px;
}

.md-chip-input {
    line-height: 34px;
    padding: 0;
    background:transparent;
    outline:none;  
    border-left: 5px solid #42A948; /* green */
    padding-left:5px;   
    } 

.error-messages p
{
  margin-bottom:0px;
  color:red;
}

.md-chip:hover {
  cursor: pointer;
}

`.md-chip-input {
    line-height: 34px;
    padding-top: 2px;
    background:transparent;
    outline:none;
    border-left: 5px solid #42A948; /* green */
    padding-left:5px; 
    margin-top: 1px;
    }

.d-flex {
   display: flex;
   align-items: baseline; /* NEW */
}