如何将文本、图片与Google Map iframe在同一行垂直居中对齐

要让这些元素在同一行且垂直对齐，最简洁的方案是用Flexbox布局，以下是修改后的代码：

<div style="display: flex; align-items: center; gap: 20px; flex-wrap: wrap;">
  <div>
    <b style="color:#777777">Date : </b> 2015-06-14
  </div>
  <div>
    <b style="color:#777777">Image : </b>
    <img src="https://observation.org/photos/as.jpg" alt="Ts" width="400" height="400">
  </div>
  <div>
    <b style="color:#777777">Location : </b>
    <iframe src="https://maps.google.com/maps?q= 152 , 22.1 &hl=es;z=18&output=embed" width="400" height="400"></iframe>
  </div>
</div>
<br><br>

关键说明： #

• display: flex：将外层容器转为弹性布局，内部元素默认在同一行排列
• align-items: center：让所有子元素在垂直方向上居中对齐
• gap: 20px：统一设置元素之间的间距，替代原来的 ，更易维护
• flex-wrap: wrap：当容器宽度不足时，元素会自动换行，避免溢出

如果需要兼容更老的浏览器（如IE8），可以用CSS Table布局：

<div style="display: table;">
  <div style="display: table-cell; vertical-align: middle; padding-right: 20px;">
    <b style="color:#777777">Date : </b> 2015-06-14
  </div>
  <div style="display: table-cell; vertical-align: middle; padding-right: 20px;">
    <b style="color:#777777">Image : </b>
    <img src="https://observation.org/photos/as.jpg" alt="Ts" width="400" height="400">
  </div>
  <div style="display: table-cell; vertical-align: middle;">
    <b style="color:#777777">Location : </b>
    <iframe src="https://maps.google.com/maps?q= 152 , 22.1 &hl=es;z=18&output=embed" width="400" height="400"></iframe>
  </div>
</div>
<br><br>

关键说明： #

• display: table：将外层容器模拟为表格
• display: table-cell：子元素模拟为表格单元格
• vertical-align: middle：单元格内元素垂直居中
• padding-right: 20px：设置单元格之间的间距

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