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.
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.
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.