如何将屏幕上的按钮调整为中心？

时间：2015-10-28 09:56:54

标签： html5 css3 twitter-bootstrap-3 

.codrops-top {
        line-height: 30px;
        font-size: 13px;
        background: #fff;
        background: rgba(255, 255, 255, 0.8);
        text-transform: uppercase;
        z-index: 9999;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        font-family: Cambria, Georgia, serif;
        box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
        font-weight: 900;
    }
    .codrops-top a {
        padding: 0px 10px;
        letter-spacing: 1px;
        color: #333;
        display: inline-block;
        text-decoration: none;
    }
    .codrops-top a:hover {
        color:#12836d;
        cursor:pointer;
        text-decoration: none;
    }
    .codrops-top span.right{
        float: right;
        
    }
    .codrops-top a{
        color:black;
    }
    .fa{
        padding:0 5px;
    }
    .codrops-top span a.btn {
        padding: 9px 38px;
        line-height: 20px;
    }
    .codrops-top span a.btn-primary {
        color: #fff;
        background-color: #5bbc2e;
        border-color: #5bbc2e;
    }
@media only screen and (max-width: 767px){
        .codrops-top{
            text-align: center;
        }
        .codrops-top span.right{
            text-align: center;
            float:none;

        }
    }
    @media screen and (min-width: 1338px){
.largeScreen {width:100%;text-align:center;}
.largeScreen span {display:inline-block;}
.hide{
    display: none;
}
}
<div class="codrops-top">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="col-lg-3 col-md-3 col-sm-3 hide">
                        <a href="">
                            <strong>Your Tech Friend </strong><span><i class="fa fa-mobile"></i></span>+91-8510-808-808
                        </a>
                    </div>
                    <div style="text-align:center;" class="col-lg-6 col-md-6 col-sm-6 hide">
                        <a href="">
                            <strong><span><i class="fa fa-book"></i></span>Blog</strong>
                        </a>
                        <a href="">
                            <strong><span><i class="fa fa-trophy"></i></span>Career</strong>
                        </a>
                        <a href="">
                            <strong><span><i class="fa fa-sitemap"></i></span>Site Map</strong>
                        </a>
                        <a href="">
                            <strong><span><i class="fa fa-rocket"></i></span>Request a Quote</strong>
                        </a>

                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-3 largeScreen">
                        <span class="right">
                            <a href="">
                                <a href="#" class="btn btn-primary">Client Area</a>
                            </a>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

现在我希望中心的客户区按钮大小为1338px屏幕，所有的东西都应该隐藏，只有按钮应该在中心。 我试过了，但是按钮没有进入中央，它正在左侧。

3 个答案:

答案 0 :(得分：0)

＆＃13;
＆＃13; 
.codrops-top {
        line-height: 30px;
        font-size: 13px;
        background: #fff;
        background: rgba(255, 255, 255, 0.8);
        text-transform: uppercase;
        z-index: 9999;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        font-family: Cambria, Georgia, serif;
        box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
        font-weight: 900;
        text-align: center;
    }
    .codrops-top a {
        padding: 0px 10px;
        letter-spacing: 1px;
        color: #333;
        display: inline-block;
        text-decoration: none;
    }
    .codrops-top a:hover {
        color:#12836d;
        cursor:pointer;
        text-decoration: none;
    }
    
    .codrops-top a{
        color:black;
    }
    .fa{
        padding:0 5px;
    }
    .codrops-top span a.btn {
        padding: 9px 38px;
        line-height: 20px;
    }
    .codrops-top span a.btn-primary {
        color: #fff;
        background-color: #5bbc2e;
        border-color: #5bbc2e;
    }
@media only screen and (max-width: 767px){
        .codrops-top{
            text-align: center;
        }
        .codrops-top span.right{
            text-align: center;
            float:none;

        }
    }
    @media only screen and (max-width: 1338px){
        #hide{
           
        }
        .codrops-top{
           text-align: center;
           float:right;
       }
   }
＆＃13; 
<div class="codrops-top">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div id="hide" class="col-lg-3 col-md-3 col-sm-3">
                        <a href="">
                            <strong>Your Tech Friend </strong><span><i class="fa fa-mobile"></i></span>+91-8510-808-808
                        </a>
                    </div>
                    <div id="hide" style="text-align:center;" class="col-lg-6 col-md-6 col-sm-6">
                        <a href="">
                            <strong><span><i class="fa fa-book"></i></span>Blog</strong>
                        </a>
                        <a href="">
                            <strong><span><i class="fa fa-trophy"></i></span>Career</strong>
                        </a>
                        <a href="">
                            <strong><span><i class="fa fa-sitemap"></i></span>Site Map</strong>
                        </a>
                        <a href="">
                            <strong><span><i class="fa fa-rocket"></i></span>Request a Quote</strong>
                        </a>

                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-3">
                        <span class="right">
                            <a href="">
                                <a href="#" class="btn btn-primary">Client Area</a>
                            </a>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我假设您已将bootstrap包含在您的代码中。 

<style> 
    @media screen and (min-width: 1338px){
        .largeScreen {width:100%;text-align:center;}
        .largeScreen span {display:inline-block;}
        .hide {display:none;}
    }
</style>
<div class="col-lg-3 col-md-3 col-sm-3 largeScreen">
    <span>
         <a href="#" class="btn btn-primary">Client Area</a>
    </span>
</div>
  • 避免在代码中多次使用相同的ID。我可以看到 ID =＆＃34;隐藏＆＃34;两次。你可以使用class =＆＃34; hide＆＃34;代替。
  • 如果你想隐藏1338px以上的元素，我建议重命名hide class，因为bootstrap hide class隐藏了所有分辨率的内容。
  • 你错过了在隐​​藏的CSS中提及display：none。
  • 从范围右侧移除浮动。 text-align：center除非删除float css属性，否则不会有任何效果。
  • 我已经添加了类largeScreen，因为类col-lg-3 col-md-3 col-sm-3会使div的宽度达到25％而不是屏幕的全宽。

希望这个答案可以帮助您解决问题。

答案 2 :(得分：0)

.codrops-top {
        line-height: 30px;
        font-size: 13px;
        background: #fff;
        background: rgba(255, 255, 255, 0.8);
        text-transform: uppercase;
        z-index: 9999;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        font-family: Cambria, Georgia, serif;
        box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
        font-weight: 900;
        text-align: center;
    }
    .codrops-top a {
        padding: 0px 10px;
        letter-spacing: 1px;
        color: #333;
        display: inline-block;
        text-decoration: none;
    }
    .codrops-top a:hover {
        color:#12836d;
        cursor:pointer;
        text-decoration: none;
    }
    
    .codrops-top a{
        color:black;
    }
    .fa{
        padding:0 5px;
    }
    .codrops-top span a.btn {
        padding: 9px 38px;
        line-height: 20px;
    }
    .codrops-top span a.btn-primary {
        color: #fff;
        background-color: #5bbc2e;
        border-color: #5bbc2e;
    }
@media only screen and (max-width: 767px){
        .codrops-top{
            text-align: center;
        }
        .codrops-top span.right{
            text-align: center;
            float:none;

        }
    }
    @media only screen and (max-width: 1338px){
        #hide{display:none;             
        }
        .codrops-top{
           text-align: center;
           float:right;
       }
   }
<div class="codrops-top">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div id="hide" class="col-lg-3 col-md-3 col-sm-3">
                        <a href="">
                            <strong>Your Tech Friend </strong><span><i class="fa fa-mobile"></i></span>+91-8510-808-808
                        </a>
                    </div>
                    <div id="hide" style="text-align:center;" class="col-lg-6 col-md-6 col-sm-6">
                        <a href="">
                            <strong><span><i class="fa fa-book"></i></span>Blog</strong>
                        </a>
                        <a href="">
                            <strong><span><i class="fa fa-trophy"></i></span>Career</strong>
                        </a>
                        <a href="">
                            <strong><span><i class="fa fa-sitemap"></i></span>Site Map</strong>
                        </a>
                        <a href="">
                            <strong><span><i class="fa fa-rocket"></i></span>Request a Quote</strong>
                        </a>

                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-3">
                        <span class="right">
                            <a href="">
                                <a href="#" class="btn btn-primary">Client Area</a>
                            </a>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

相关问题
最新问题