如何在固定寬度的div居中，以便當div比瀏覽器寬時水平滾動並保持居中響應？

Question

我可以按照我想要的方式進行此工作，只是我需要使它保持居中，以便當瀏覽器寬度在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>

Answer 1

您可以這樣做：

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

如何在固定寬度的div居中，以便當div比瀏覽器寬時水平滾動並保持居中響應？

問題描述

1 個解決方案

解決方案1
0 2014-02-09 23:28:40

如何在固定寬度的div居中，以便當div比瀏覽器寬時水平滾動並保持居中響應？

問題描述

1 個解決方案

解決方案1 0 2014-02-09 23:28:40

解決方案1
0 2014-02-09 23:28:40