如何在水平轴中间对齐引导行中的子元素？答案

【问题标题】：How do I align child elements within a bootstrap row across the middle of the horizontal axis?如何在水平轴中间对齐引导行中的子元素？
【发布时间】：2020-06-18 14:02:00
【问题描述】：

我正在创建一个带有许多不同mat-list-item 元素的侧导航栏，用户可以单击这些元素。我希望这些列表项的图标和名称在水平轴的中间对齐。我该怎么做呢？

我尝试过使用对齐内容和对齐项目，但它们似乎都不起作用。

<div class="row justify-content-center align-self-center ">
    <a mat-list-item  class="color-white drawer-list-item flex">
        <div class="col-6 h-100">
            <mat-icon class="icon">{{icon}}</mat-icon>
        </div>
        <div class="col-6 h-100">
            <span>{{name}}</span>
        </div>
    </a>
</div>

【问题讨论】：

我认为您需要将justify-content-center align-items-center 添加到<a mat-list-item 元素

标签： angular bootstrap-4 angular-material

【解决方案1】：

是should bed-flex，而不是flex：

https://codepen.io/etrain/pen/BZdYwa

【讨论】：