容器内有两个元素 – 一个(蓝色)需要保持在左侧,另一个(绿色)相对于外部红色居中.但是,如果屏幕足够小,则居中的容器(绿色)不能与左侧的容器(蓝色)重叠,它应始终保持在蓝色的右侧.有什么想法可以实现吗？如果不是用css,那么可能是用js？
大屏幕
小屏幕
到目前为止我得到了：
.red {
height: 100px;
text-align: center;
border: 3px solid red;
position: relative;
}
.blue {
background: blue;
height: 100%;
float: left;
}
.centered {
display: inline-block;
border: 1px solid green;
position: absolute;
left: calc(50% - 70px);
width: 140px;
top: 0;
}
这使绿色容器居中,但它在较小的屏幕上与蓝色重叠.
最佳答案
看起来这是可以在页眉中使用的东西,侧面的项目和中间的标题.所以,我采取了一种非常不同和简单的方法.当宽度不大时,视口居中看起来不太好.使用媒体查询在居中模式之间切换. Fiddle Demo
#main {
position: relative;
overflow: hidden;
text-align: center;
}
#center {
position: absolute;
display: inline-block;
left: 50%;
transform: translateX(-50%);
}
@media (max-width: 500px) {
#center {
position: static;
transform: none;
}
}
原文链接：https://www.f2er.com/css/427630.html