如何使具有固定宽度的 div 居中，以便它在 div 比浏览器宽时水平滚动并保持响应居中

我让它按照我想要的方式工作，除了我需要它保持居中，以便当浏览器宽度在 835px - 320px 之间时，绿色矩形位于浏览器的中心（直到用户滚动）。

我想用CSS解决这个问题，但我并不反对JavaScript解决方案。

我对在stackoverflow上发布问题很陌生，所以如果我不够清楚，或者如果我提供的信息太多或不够，我提前道歉。

提前谢谢你。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
}
.bottles-container-mobile .container-fluid {
    overflow: auto;
    background: #ccc;
}
.product_map_image_mobile {
    width: 835px;
    height: 359px;
    overflow: auto;
    overflow-y: hidden;
    margin: 0 auto;
    white-space: nowrap;
    position: relative;
}
.product_map_image_mobile .product_map_link_mobile {
    display: inline-block;
    position: absolute;
    text-indent: -999em;
    overflow: hidden;
}
.product_map_image_mobile #product_map_link_mobile_0 {
    width: 77px;
    height: 193px;
    top: 117px;
    left: 20px;
    background:blue;
}
.product_map_image_mobile #product_map_link_mobile_1 {
    width: 88px;
    height: 202px;
    top: 113px;
    left: 97px;
    background:red;
}
.product_map_image_mobile #product_map_link_mobile_2 {
    width: 91px;
    height: 213px;
    top: 106px;
    left: 187px;
    background:orange
}
.product_map_image_mobile #product_map_link_mobile_3 {
    width: 89px;
    height: 218px;
    top: 104px;
    left: 279px;
    background:purple;
}
.product_map_image_mobile #product_map_link_mobile_4 {
    width: 100px;
    height: 233px;
    top: 94px;
    left: 369px;
    background:green;
}
.product_map_image_mobile #product_map_link_mobile_5 {
    width: 91px;
    height: 219px;
    top: 104px;
    left: 470px;
    background:orange;
}
.product_map_image_mobile #product_map_link_mobile_6 {
    width: 86px;
    height: 216px;
    top: 104px;
    left: 562px;
    background:purple;
}
.product_map_image_mobile #product_map_link_mobile_7 {
    width: 91px;
    height: 211px;
    top: 106px;
    left: 649px;
    background:gray;
}
.product_map_image_mobile #product_map_link_mobile_8 {
    width: 79px;
    height: 194px;
    top: 117px;
    left: 740px;
    background:blue;
}

</style>
</head>
<body>
<div class="wrapper">
    <div class="bottles-container-mobile">
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="product-solutions-green-bar-mobile">
                    <div class="product_map_image_mobile">
                        <a class="product_map_link_mobile" id="product_map_link_mobile_0" title="" href="#"></a>
                        <a class="product_map_link_mobile" id="product_map_link_mobile_1" title="" href="#"></a>
                        <a class="product_map_link_mobile" id="product_map_link_mobile_2" title="" href="#"></a>
                        <a class="product_map_link_mobile" id="product_map_link_mobile_3" title="" href="#"></a>
                        <a class="product_map_link_mobile" id="product_map_link_mobile_4" title="" href="#"></a>
                        <a class="product_map_link_mobile" id="product_map_link_mobile_5" title="" href="#"></a>
                        <a class="product_map_link_mobile" id="product_map_link_mobile_6" title="" href="#"></a>
                        <a class="product_map_link_mobile" id="product_map_link_mobile_7" title="" href="#"></a>
                        <a class="product_map_link_mobile" id="product_map_link_mobile_8" title="" href="#"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

你可以这样做：

@media screen and(max-width:835px) and (min-width:320px) {
    .product_map_image_mobile {
        width: new_widthpx;
    }
}

相关内容

最新更新

热门标签：