[英]How to align two elements and keep them on the same line
好吧,我有横幅。
带有该横幅的是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";
}
任何帮助将不胜感激! 如果您有任何解决方案,请重新链接小提琴。
在我解释问题时,您需要将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;
否则包装将不会包含在横幅内。
我缩小您的图片仅仅是因为它们不适合我的显示器。
这就是你想要的吗?
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.