如何将图片在div中水平居中并在同一行放置另一张图片？

看起来你遇到的问题是因为常规的margin: 0 auto居中方式会让图片变成块级元素，独占一行，导致另一张图被迫换行。这里给你推荐两种简单的解决方案，优先用Flexbox，这是现代布局最省心的方式：

方案一：Flexbox布局（推荐） #

这个方案能让第一张图在容器内水平居中，同时第二张图紧跟在它旁边，完全不会换行。

HTML结构 #

<div class="image-wrapper">
  <img src="center-image.png" alt="居中显示的图片" class="center-img">
  <img src="side-image.png" alt="侧边图片" class="side-img">
</div>

CSS样式 #

.image-wrapper {
  display: flex;
  align-items: center; /* 可选：让两张图垂直方向居中对齐 */
  width: 100%; /* 让容器占满父元素宽度，保证居中效果是相对于整个父容器 */
}

.center-img {
  margin: 0 auto; /* 核心：左右自动margin，让图片在容器内水平居中 */
}

.side-img {
  margin-left: 15px; /* 可选：调整两张图之间的间距，根据需求修改 */
  /* 可以额外设置图片大小，比如 width: 50px; height: auto; */
}

为什么这个方法有效？因为display: flex会让容器内的元素变成弹性项，默认不会换行（flex-wrap: nowrap是默认值），同时margin: 0 auto会把第一张图推到容器的水平中心位置，第二张图自然就跟在它旁边了。

方案二：Grid布局（适合更复杂的场景） #

如果你的布局还有其他需求，比如要精确控制位置，可以用Grid：

.image-wrapper {
  display: grid;
  grid-template-columns: 1fr auto auto 1fr; /* 左右占满剩余空间，中间放两张图 */
  align-items: center;
  width: 100%;
}

.center-img {
  grid-column: 2; /* 放在第二列 */
}

.side-img {
  grid-column: 3; /* 放在第三列，紧跟在居中图旁边 */
  margin-left: 15px;
}

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

大概率是你给居中的图片加了display: block，块级元素会独占一行，所以另一张图只能跑到下一行。而上面的两种方案都是让两张图保持在同一行的内联/弹性/网格项状态，避免了换行问题。

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