如何对齐两个元素并使它们保持在同一行

Question

好的，我有一个横幅。

那个横幅是 2 张 div 图像，它们应该在包装纸中彼此相邻。（所以总共 4 divs）Banner > Wrapper > img1, img2.

右图水平翻转。我用颜色填充了 div，而不是上传我的图片。

所以我需要图像始终相邻。然后我需要他们的父包装器始终在正文中居中并与横幅底部对齐 div.

我不知道我为什么遇到这么多麻烦。我可以在 echother 旁边实现它们，并将它们对齐到底部。但是一旦我这样做，我就无法将它们居中。

这是我的fiddle：https://jsfiddle.net/vwdud0bu/3/ 这是我的 HTML：

<div class="Banner-Container"> 
  <div class="dock-Wrapper">
    <div class="dock-IMG1">IMG1</div>
    <div class="dock-IMG2">IMG2</div>
  </div> 
</div>

这是我的CSS：

body {
  margin: 0;
  padding: 0;
  }

.Banner-Container {
  width:100%;
  height:606px;
  background-image:url(images/mainBannerBG.jpg);
  background-color:black;
  z-index:-5;
  overflow:hidden;
  }


.dock-Wrapper { 
  height:aut0;
  width:1920px;
  background:#777;
  bottom:0;
  overflow:hidden;
  position:relative;
  } 

.dock-IMG1 {
  width:957px;
  height:119px;
  background-image:url(images/dock.png);
  display:inline-block;
  background-color:blue;
  }

.dock-IMG2 {
  width:957px;
  height:119px;
  background-image:url(images/dock.png);
  display:inline-block;
  background-color:red;
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
  }

任何帮助将不胜感激！如果您有任何解决方案，请重新link fiddle。

Answer 1

在我解释这个问题时，您需要将 2 张图像放在一起，并放置在位于横幅底部居中的包装内。

编辑以包含 isherwood 的建议

https://jsfiddle.net/Lmxbhd0L/2/

为了让它到达底部，我使用了这里的解决方案：How do I horizontally center an absolute positioned element inside a 100% width div?

wrapper 是 position:absolute; left:50%;bottom:0px; 并且还设置 margin-left: 等于宽度的一半的负值。

另外 Banner-Container 必须是 position:relative; 否则包装纸将不会包含在横幅中。

我缩小了你的图片，因为它们不适合我的显示器。

Answer 2

这是你想要的吗？

https://jsfiddle.net/zer00ne/1ya613hj/embedded/result/

https://jsfiddle.net/zer00ne/1ya613hj/

如何对齐两个元素并使它们保持在同一行

How to align two elements and keep them on the same line

html

css

centering