Question

我有3 <a>个btn引导类。

我找到了如何使用上面的代码

水平和垂直居中

HTML

<div class="row row-centered ">
    <div class="vertically-centered">
        <div class="col-xs-12 col-sm-12">
            <a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#">Prepare</a>
            <a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#" style="margin-left: 100px; margin-right: 100px;">Handover</a>
            <a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#">Tuto</a>
        </div>
    </div>
</div>

CSS

    .btn-lg{
        padding-top: 50px;
        padding-bottom: 50px;
        padding-left: 10px;
        padding-right:10px;
    }

    .row-centered {
        text-align: center;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        font: 0/0 a;
    }

    .row-centered:before {
        content: ' ';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }

    .vertically-centered {
        vertical-align: middle;
        display: inline-block;
        width: 100%;
    }

    .col-centered {
        display: inline-block;
        float: none;
    }

当屏幕足够宽时，它可以正常工作

但是当屏幕比830px更小（宽度）时，它会失败

修改

我更改了HTML和CSS

HTML修改

<div class="row row-centered ">
    <div class="vertically-centered">
        <div class="col-xs-12 col-sm-4 col-md-4">
            <a class="btn btn-lg btn-default btn-primary" href="#">Prepare</a>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-4">
            <a class="btn btn-lg btn-default btn-primary" href="#">Handover</a>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-4">
            <a class="btn btn-lg btn-default btn-primary" href="#">Tuto</a>
        </div>
    </div>
</div>

CSS MODIFIED

.btn-lg{
            padding-top:30px;
            padding-bottom:30px;
            width:100%;
        }

    .row-centered {
        text-align: center;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        font: 0/0 a;
    }

    .row-centered:before {
        content: ' ';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }

    .vertically-centered {
        vertical-align: middle;
        display: inline-block;
        width: 100%;
    }

    .col-centered {
        display: inline-block;
        float: none;
    }

现在我的问题是我的按钮在彼此上方对齐（这很好）但它们在我的nav-background

之下

Answer 1

将中间按钮上的边距更改为百分比值：

<a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#" style="margin-left: 5%; margin-right: 5%;">Handover</a>

Answer 2

我认为这是因为您在中间链接之前和之后使用了保证金。我尝试做的是用空列解决它

<div class="row row-centered ">
    <div class="vertically-centered">
        <div class="col-xs-12 col-sm-12">
            <a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#">Prepare</a>
        <a class="btn btn-lg btn-default btn-primary col-centered col-xs-1 col-sm-1 col-md-1" href="#"></a> 
            <a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#">Handover</a>
            <a class="btn btn-lg btn-default btn-primary col-centered col-xs-1 col-sm-1 col-md-1" href="#"></a>
        <a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#">Tuto</a>
        </div>
    </div>
</div>

Answer 3

问题在于导航是一个自定义类而不是来自boostrap的navbar类

Boostrap / CSS响应垂直居中

3 个答案: