HTML CSS中Div、文本与图片横向对齐失败的技术求助

嘿，我懂你现在的困扰——想实现图片和标题并排的布局，但不管怎么调CSS，标题总乖乖待在图片下面对吧？别着急，我给你两种实用的解决方案，都是前端常用的布局方式，你可以按需选择：

方法一：用Flexbox布局（推荐，简洁易维护） #

Flexbox是现在最流行的布局方案之一，能轻松实现元素的横向排列和对齐。你只需要给父容器.main添加Flex相关样式就行，HTML结构完全不用改：

修改后的CSS代码：

.main {
  display: flex;
  align-items: center; /* 让图片和标题垂直居中对齐 */
}
.newstitle { 
  background-color: #ffed00; 
  font-family: Arial, Helvetica, sans-serif; 
  font-weight: bold; 
  font-size: 20px; 
}
.newspic img { 
  padding: 20px; 
  height: 300px; 
}

原理很简单：把.main设为display: flex后，它的直接子元素（.newspic和.newstitle）会自动变成flex项目，默认横向排列；再加上align-items: center，就能让它们在垂直方向上居中对齐，完美匹配你想要的布局效果。

方法二：用inline-block实现传统并排布局 #

如果你更习惯传统的行内块布局，也可以调整两个子元素的display属性：

修改后的CSS代码：

.newspic {
  display: inline-block; /* 让图片容器变成行内块 */
  vertical-align: middle; /* 和标题垂直居中对齐 */
}
.newstitle { 
  background-color: #ffed00; 
  font-family: Arial, Helvetica, sans-serif; 
  font-weight: bold; 
  font-size: 20px; 
  display: inline-block; 
  vertical-align: middle; /* 保持垂直居中 */
}
.newspic img { 
  padding: 20px; 
  height: 300px; 
}

这里要注意：行内块元素之间可能会有默认的空格间隙，如果觉得影响布局，可以把HTML里.newspic和.newstitle的标签写在同一行，或者给父容器设置font-size: 0后再给子元素恢复字体大小。

为什么原来的代码不行？ #

你原来的代码里，.main是默认的块级元素，它里面的.newspic和.newstitle也都是块级元素（.newspic没设置display的话默认是block），块级元素会独占一行，所以标题自然就跑到图片下面啦～

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