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

Question

Okay so I have a banner.

Withen that banner is 2 div images that should be next to each other within a wrapper. (so 4 divs in all) Banner > Wrapper > img1, img2.

The right image is flipped horizontally. I have filled in the divs with colors instead of uploading my images.

So i need the images to be next to eachother always. Then I need their parent wrapper to always be centered withen the body and to be aligned to the bottom of the banner div.

I donno why im having so much trouble. I can achieve them next to echother, and align them to the bottom. But am having trouble centering them once i do this.

Here is my fiddle: https://jsfiddle.net/vwdud0bu/3/ Here is my HTML:

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

Here is my 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";
  }

Any help would be beyond appreciated! Please re-link the fiddle if you have any solutions.

Answer 1

As I interpret the question, you need 2 images to be together, within a wrapper that is centered and at the bottom of the banner.

edited to include isherwood's suggestion

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

To make it go to the bottom I used the solution here: How do I horizontally center an absolute positioned element inside a 100% width div?

Where the wrapper is position:absolute; left:50%;bottom:0px; position:absolute; left:50%;bottom:0px; and also set margin-left: to equal the negative of half the width.

Also Banner-Container must be position:relative; otherwise the wrapper will not be contained within the banner.

I shrunk you images simply because they didn't fit on my display.

Answer 2

Is this what you wanted?

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

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

Relevant 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;
}