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

Posted 2023-03-05

【中文标题】如何将 Bootstrap 4 中的 SVG 垂直对齐到行高？

【英文标题】：How to vertically align SVG in Bootstrap 4 to row height?

【发布时间】：2018-06-26 15:50:31

【问题描述】：

Link to codepen

我在 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

【问题讨论】：

要么将my-auto 类添加到两列，要么将其从两列中删除。

你的 codepen 不工作。

codepen 正在工作。

您的 codepen 需要很长时间才能加载！我也没有在 CSS 中看到 .my-auto。您是否尝试过使用display: flex; align-items: center;

那你还得加justify-content: center试试看

【参考方案1】：

<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>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案2】：

这里是如何单独使用原生 Bootstrap 4 类而不需要任何自定义 css 进行对齐：

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

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

为了将微调器向上推一点，我还添加了 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 代码块放入您的代码示例中！

【参考方案3】：

从上面的评论讨论中重新迭代，但是在使用中找到了解决方案

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

有用的 w3 演示 W3 Schools Link