如何對齊兩個元素並使它們保持在同一行

Question

好吧，我有橫幅。

帶有該橫幅的是2個div圖像，它們應該在包裝器中彼此相鄰。 （總共4個div）橫幅>包裝器> img1，img2。

右側圖像水平翻轉。 我已經用顏色填充了div，而不是上傳圖片。

所以我需要圖像始終彼此相鄰。 然后，我需要他們的父包裝始終與主體居中對齊，並與橫幅div的底部對齊。

我不知道為什么我有這么多麻煩。 我可以在回聲旁邊實現它們，並將它們與底部對齊。 但是一旦執行此操作，就很難將它們居中。

這是我的小提琴： 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";
  }

任何幫助將不勝感激！ 如果您有任何解決方案，請重新鏈接小提琴。

Answer 1

在我解釋問題時，您需要將2張圖片放在一起，放在橫幅的中間和底部的包裝紙中。

編輯以包括伊瑟伍德的建議

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

為了使其深入到底，我在這里使用了解決方案： 如何將絕對定位的元素水平居中於100％寬度的div中？

包裝的position:absolute; left:50%;bottom:0px; 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/

相關CSS

body,html {
    width: 100vw;
    height: 100vh;
}
.Banner-Container {
    margin: auto 0;
    display: table;
}
.dock-Wrapper {
    height:auto;
    display: table-row;
}
.dock-IMG1 {
    display:table-cell;

.dock-IMG2 {
    display:table-cell;
}