angularjs - 如何在 css 中使用响应式设置中心图像的位置？

Question

请看我的html:

                    <div class="row">
                <div  class="row-fluid ">
                    <div class="col-md-6 col-xs-6 col-sm-6 col-lg-6 SetPadding">
                        <a href="#" id="button1" "></a>
                    </div>
                    <div class="col-md-6 col-xs-6 col-sm-6 col-lg-6 SetPadding">
                        <a href="#" id="button2" ></a>
                    </div>
                </div>
                <div  class="row-fluid ">

                    <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12 SetPadding textaligncenter">
                        <a href="#" id="centerbutton" ></a>
                    </div>
                </div>
                <div  class="row-fluid ">
                    <div class="col-md-6 col-xs-6 col-sm-6 col-lg-6 SetPadding">
                         <a href="#" id="button3" ></a>
                    </div>
                    <div class="col-md-6 col-xs-6 col-sm-6 col-lg-6 SetPadding">
                         <a href="#" id="button4" ></a>
                    </div>
                </div>
                </div>

CSS

#button1 {background: url('../img/button1.png');background-repeat: no-repeat;background-size: 100% 100%;display: inline-block;width:100%;padding-bottom:45%;}
                #button2 {background: url('../img/button2.png');background-repeat: no-repeat;background-size: 100% 100%;display: inline-block;width:100%;padding-bottom:45%;}
                **#centerbutton{background: url('../img/buttoncenter.png');background-repeat: no-repeat;background-size: 100% 100%;display: inline-block;width:100%;padding-bottom:45%;}**
                #button3 {background: url('../img/button3.png');background-repeat: no-repeat;background-size: 100% 100%;display: inline-block;width:100%;padding-bottom:45%;}
                #button4 {background: url('../img/button4.png');background-repeat: no-repeat;background-size: 100% 100%;display: inline-block;width:100%;padding-bottom:45%;}

我的预期输出是

我已经尝试过中心按钮的绝对位置，但是在调整窗口大小时会产生问题

Answer 1

你的 HTML 元素叫做 id="centerbutton"

但是你的 CSS 是针对#buttoncenter

.....或者至少在你编辑它之前是这样