如何使用CSS实现两个元素的同高度对齐？

问题场景 #

需要让Hello文本与编辑图标在同一水平行显示，同时编辑图标要和带边框容器的上下边缘完全贴合，当前图标位于文本下方，无法满足需求。

解决方案 #

通过调整父容器布局和图标样式实现效果，修改后的代码如下：

CSS代码

.bordered-container {
    height: 50px;
    border: 1.5px solid #88888850;
    margin: 30px;
    /* 启用Flex布局，让子元素水平排列 */
    display: flex;
    /* 垂直方向居中对齐，确保文本与图标在同一水平线 */
    align-items: center;
}

.title {
    text-align: center;
    flex: 1;
    font-size: 1.8rem;
    font-weight: bolder;
}

.edit-icon {
    width: 20px;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    height: 100%; /* 继承父容器高度，贴合上下边缘 */
    background-color: #88888850;
}

HTML代码（无需修改）

<body>
  <div class="bordered-container">
    <span class="title">Hello</span>
    <div class="edit-icon">
      EDIT
    </div>
  </div>
</body>

修改说明 #

1. 父容器添加Flex布局：display: flex将子元素从垂直排列改为水平排列，align-items: center确保文本和图标在垂直方向居中，解决两者不在同一行的问题。
2. 图标容器样式调整：将height设为100%，让图标容器高度与父容器一致，完全贴合上下边缘；移除原有的padding: 10px，避免内边距导致容器超出父范围。

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