Question

我有一张卡片，我想垂直对齐卡片中的内容。我已经在这里列出的bootstrap 4指南和教程中尝试了所有内容：

https://v4-alpha.getbootstrap.com/utilities/vertical-align/

https://v4-alpha.getbootstrap.com/utilities/flexbox/#align-items

这是我的代码：

<div class="col-sm-12 col-md-4">
    <div class="white-card item" data-mh="my-group-2">
        <div class="white-card-block h-100  justify-content-center">
             <div class="row">
                 <div class="left-side">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.02 20.97">
                      <defs>
                         <style>
                            .cls-1 {
                               fill: #ed8b00;
                               fill-rule: evenodd;
                             }
                         </style>
                       </defs>
                    <g id="Layer_1" data-name="Layer 1">
                        <g id="Guides">
                             <path class="cls-1" d="M27,4.1a1.67,1.67,0,0,0-.49-1.2L24.16.49a1.68,1.68,0,0,0-2.37,0L10.35,12.09,5.23,6.88a1.68,1.68,0,0,0-2.37,0L.49,9.29A1.67,1.67,0,0,0,0,10.49a1.7,1.7,0,0,0,.49,1.2L6.8,18.08l2.37,2.4a1.68,1.68,0,0,0,2.37,0l2.37-2.4L26.53,5.3A1.7,1.7,0,0,0,27,4.1Z" />
                         </g>
                       </g>
                    </svg>
                 </div>
              <div class="right-side">
                   <h4><strong>Easy Installation</strong></h4>
                   <p>Easy Installation on new or existing electric and gas tanks</p>
              </div>
         </div>
     </div>
</div>

这是我卡的CSS：

.white-card {
            margin: 15px 0;
            .white-card-block {
                .left-side {
                    display: inline-block;
                    width: 10%;
                    margin: 0 5%;
                }
                .right-side {
                    display: inline-block;
                    width: 80%;
                    p {
                        margin: 0;
                    }
                }
            }
        }

这是我当前卡片的图片：

任何帮助都会有所帮助。我几个小时都在捡脑。提前致谢。 :)

Answer 1

我删除了你的行div因为它是不必要的并且替换了两个类d-flex align-items-center的类justify-content-center。我还将这两个类添加到左侧div

我在svg标签中定义了宽度和高度，因为它没有显示给我

Here is the example in fiddle

    <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">
<div class="col-sm-12 col-md-4">
    <div class="white-card item" data-mh="my-group-2">
        <div class="white-card-block h-100 d-flex align-items-center">
                 <div class="left-side d-flex align-items-center">
                     <svg width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.02 20.97">
                      <defs>
                         <style>
                            .cls-1 {
                               fill: #ed8b00;
                               fill-rule: evenodd;
                             }
                         </style>
                       </defs>
                    <g id="Layer_1" data-name="Layer 1">
                        <g id="Guides">
                             <path class="cls-1" d="M27,4.1a1.67,1.67,0,0,0-.49-1.2L24.16.49a1.68,1.68,0,0,0-2.37,0L10.35,12.09,5.23,6.88a1.68,1.68,0,0,0-2.37,0L.49,9.29A1.67,1.67,0,0,0,0,10.49a1.7,1.7,0,0,0,.49,1.2L6.8,18.08l2.37,2.4a1.68,1.68,0,0,0,2.37,0l2.37-2.4L26.53,5.3A1.7,1.7,0,0,0,27,4.1Z" />
                         </g>
                       </g>
                    </svg>
                 </div>
              <div class="right-side">
                   <h4><strong>Easy Installation</strong></h4>
                   <p>Easy Installation on new or existing electric and gas tanks</p>
              </div>
         </div>
     </div>
</div> 

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

CSS

.white-card {
                margin: 15px 0;
                .white-card-block {
                    .left-side {
                        display: inline-block;
                        width: 10%;
                        margin: 0 5%;
                    }
                    .right-side {
                        display: inline-block;
                        width: 80%;
                        p {
                            margin: 0;
                        }
                    }
                }
            }

Bootstrap 4卡内容未垂直对齐中间

1 个答案: