Question

我在Bootstrap 4列中有一个svg：

  <div class="col-lg-4 mx-auto ipad_right" style="text-align:center;">

我尝试添加课程：

.my-auto

到svg元素，svg仍然粘在列的顶部。

如何垂直对齐svg以便坐在ipad屏幕内（50％来自顶部或父级div，50％来自底部）

Link to codepen

Answer 1

重复上述评论讨论，但在使用

时已找到解决方案

.class{
display: flex;
align-items: center;
justify-content: center
}

有用的w3演示W3 Schools Link

Answer 2

以下是单独使用本机Bootstrap 4类的方法，而没有任何自定义css用于对齐：

首先，不要将Bootstrap容器嵌套在其他容器中！

清理完代码后，只需将类d-flex justify-content-center添加到列中，将align-self-center添加到包含微调器的标记中。而已！

为了向上推动微调器，我还添加了pb-4类，添加了 padding bottom 以使其更加居中（因为你的背景图像并没有真正地在视觉上居中，因为手）。

以下是代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<style>
    .ipad_right{
        background: url("https://t00.deviantart.net/LVytvO1_H3UYV-jGPqj79iw4fPU=/300x200/filters:fixed_height(100,100):origin()/pre00/acd7/th/pre/f/2016/072/c/2/taking_photo_for_tablet_png_by_nayulipa-d9v0h5i.png");
        background-repeat: repeat;
        background-position-x: 0%;
        background-position-y: 0%;
        opacity: .97;
        background-repeat: no-repeat;
        background-position: bottom center;
    }

    .tt_button {
        -webkit-animation: rotation 1800ms infinite linear;
        -moz-animation: rotation 1800ms infinite linear;
        -o-animation: rotation 1800ms infinite linear;
        animation: rotation 1800ms infinite linear;
        transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
    }

    @-webkit-keyframes rotation {
        from {-webkit-transform: rotate(0deg);}
        to   {-webkit-transform: rotate(359deg);}
    }
    @-moz-keyframes rotation {
        from {-moz-transform: rotate(0deg);}
        to   {-moz-transform: rotate(360deg);}
    }
    @-o-keyframes rotation {
        from {-o-transform: rotate(0deg);}
        to   {-o-transform: rotate(360deg);}
    }
    @keyframes rotation {
        from {transform: rotate(0deg);}
        to   {transform: rotate(360deg);}
    }
</style>


<div class="container">
    <div class="row">
        <div class="col-lg-10 mx-auto">
            <h1 class="text-uppercase">
                <strong>SVG  SPINNER</strong>
                <hr class="light my-4">
                <p class="text-faded mb-5">VERTICALLY ALIGNED</p>
            </h1>
        </div>
    </div>
    
    <div class="row" style="height:200px;">
        <div class="col-lg-8 mx-auto my-auto">SUBSCRIBE</div>

        <div class="col-lg-4 ipad_right d-flex justify-content-center">

            <a class="js-scroll-trigger align-self-center pb-4" href="#about">
                <img src="https://picsum.photos/44/">
            </a>
        </div>
    </div>
</div>

注意：您需要调整代码以适用于较小的屏幕。

并且：

永远不要再将如此庞大的SVG代码块放入代码示例中了！

如何将Bootstrap 4中的SVG垂直对齐到行高？

2 个答案: