Question

我有3个div块：

1st：left-aligned
第二名：居中对齐
3rd：right-aligned

第二个块（居中）是固定的，所以每当用户滚动时，这一个仍然在页面的中心。

问题：无法在Google Chrome上运行。

＆＃13;

#generic-container {
    width:100%;
    height: 100%;
    text-align:center;
    padding-top: 40px;
}

#generic-left {
    float:left;
    width: calc(50% - 270px);
    /*background: #ff0000;*/
    text-align: left;
    padding: 0 10px;
}

#generic-center {
    display: inline-block;
    padding: 20px;
    width:450px;
    height: 360px;
    /*background: #00ff00;*/
    position: fixed;
    top: 50%;
    margin-top: -180px;
}

#generic-right {
    float:right;
    width: calc(50% - 260px);
    /*background: #0000ff;*/
    text-align: left;
    padding: 0 10px;
}

＆＃13;

<div id="generic-container">
    <div id="generic-left">
        aa aa aa aa aa aa 
    </div>
    <div id="generic-center">
        <div>
            bb bb bb bb bb
        </div>
    </div>
    <div id="generic-right">
        cc cc cc cc cc
    </div>
</div>

＆＃13;

Answer 1

这是你想要的吗？

<强> CSS

#generic-container {
    width:100%;
    height: 100%;
    text-align:center;
    padding-top: 40px;
    box-sizing: border-box;
}

#generic-left {
    float:left;
    width: calc(50% - 225px);
    /*background: #ff0000;*/
    text-align: left;
    padding: 0 10px;
    box-sizing: border-box;
}

#generic-center {
    display: inline-block;
    padding: 20px;
    width:450px;
    height: 360px;
    /*background: #00ff00;*/
    position: fixed;
    top: 50%;
    margin-top: -180px; // Beware this rule is confusing
    box-sizing: border-box;
    margin-left: -225px;
    left: 50%;
}

#generic-right {
    float:right;
    width: calc(50% - 225px);
    /*background: #0000ff;*/
    text-align: left;
    padding: 0 10px;
    box-sizing: border-box;
}

<强> DEMO HERE

Answer 2

也许这就是你要找的东西：

刚删除＃generic-container中的“text-align”和“generic-center”中的“div”

Css：

 #generic-container {
    width:100%;
    height: 100%;
    padding-top: 40px;
    border: solid 2px yellow;
}

    #generic-left {
        float:left;
        width: calc(50% - 270px);
        /*background: #ff0000;*/
        text-align: left;
        padding: 0 10px;
        border: solid 2px red;
    }

#generic-center {
    display: inline-block;
    padding: 20px;
    width:450px;
    height: 360px;
    text-align:center;
    /*background: #00ff00;*/
    position: fixed;
    top: 50%;
    margin-top: -180px;
    border: solid 2px green;
}

#generic-right {
    float:right;
    width: calc(50% - 260px);
    /*background: #0000ff;*/
    text-align: left;
    padding: 0 10px;
    border: solid 2px blue;
}

Html：

<div id="generic-container">
    <div id="generic-left">
        aa aa aa aa aa aa 
    </div>
    <div id="generic-center">
        bb bb bb bb bb
    </div>
    <div id="generic-right">
        cc cc cc cc cc
    </div>
</div>

演示：http://codepen.io/Dilraj7/pen/ZYgNZJ

中心div块已修复，但无法在Google Chrome上运行

2 个答案: