如何实现图片与左侧文本垂直居中且适配屏幕？解决vertical-align无效问题

嘿，我来帮你搞定这个垂直居中的坑！你用vertical-align: middle没生效的核心原因是——你给图片加了float: right！浮动元素会脱离正常文档流，vertical-align属性对浮动元素完全不起作用，这就是为啥你的设置没效果~

下面给你两个靠谱的解决方案，按需选择：

方案1：用Flexbox（推荐，适配现代浏览器+响应式） #

Flexbox是现在布局的首选，代码简洁，还能完美适配屏幕尺寸变化。只需要修改.col的样式，去掉图片的浮动：

#content .col {
  /* 替换原来的float: left，改用flex布局 */
  display: flex;
  align-items: center; /* 关键：让子元素垂直居中 */
  justify-content: space-between; /* 文本靠左，图片靠右 */
  width: 50%;
  padding: 10px;
  background: white;
  font-size: 19px;
  height: 1000px;
}

#content .col img {
  /* 删掉float: right和vertical-align，flex已经处理了位置和对齐 */
}

.skills {
  font-weight: bold;
  list-style: none;
}

/* 你的其他样式保持不变 */

原理：align-items: center会让容器内的所有子元素（文本+图片）在垂直方向上居中，不管屏幕怎么缩放，这个居中效果都会稳定保持。

方案2：用Table-Cell（兼容老浏览器，比如IE10） #

如果需要兼容比较旧的浏览器，可以用表格布局的思路：

/* 首先给父容器#content加样式 */
#content {
  display: table;
  width: 100%;
}

#content .col {
  display: table-cell;
  vertical-align: middle; /* 关键：垂直居中 */
  width: 50%;
  padding: 10px;
  background: white;
  font-size: 19px;
  height: 1000px;
}

#content .col img {
  display: inline-block;
  margin-left: auto; /* 让图片靠右对齐 */
}

.skills {
  font-weight: bold;
  list-style: none;
}

原理：display: table-cell会让元素像表格单元格一样工作，vertical-align: middle就能生效，同时用margin-left: auto让图片靠右。

重要提醒 #

不管用哪种方案，一定要删掉图片的float: right属性，浮动会破坏这些布局的对齐逻辑，这是你之前失败的关键哦！

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