实现div元素相互居中对齐，修复文本div位于图片底部的布局问题

问题根源 #

你遇到的对齐问题是因为inline-block元素的默认垂直对齐规则为vertical-align: baseline，两个同级的内联块盒子会默认按照底部基线对齐，这也是你给.feature_details加margin-bottom不生效的原因——该属性无法修改默认的内联块对齐规则。你原来设置的margin-bottom:4rem如果是需要文本区块底部留空的话可以正常保留，不影响后续对齐效果。

方案1：保持inline-block布局，修改垂直对齐属性 #

给两个inline-block元素统一设置垂直对齐规则即可，修改CSS如下：

.feature_details {
  display: inline-block;
  width: 40%;
  text-align: left;
  margin-bottom: 4rem;
  /* 新增垂直对齐规则，top为顶部对齐，要垂直居中可以改成middle */
  vertical-align: top;
}

.feature_display {
  display: inline-block;
  width: 50%;
  /* 和左侧保持一致的垂直对齐规则 */
  vertical-align: top;
}

.feature_display__img {
  width: 100%;
  height: auto;
}

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

直接给父容器设置flex布局，对齐规则更灵活可控，也不用处理inline-block自带的空白节点问题，修改CSS如下：

/* 给父容器新增flex规则 */
.feature_section__feature_left {
  display: flex;
  /* 左右两侧自动留白调整间距 */
  justify-content: space-between;
  /* 对齐方式可按需调整：flex-start=顶部对齐，center=垂直居中，flex-end=底部对齐 */
  align-items: center;
}

.feature_details {
  width: 40%;
  text-align: left;
  margin-bottom: 4rem;
}

.feature_display {
  width: 50%;
}

.feature_display__img {
  width: 100%;
  height: auto;
}

后续如果要调整对齐方式，只需要修改父容器的align-items属性即可，维护成本更低。

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