Jquery 如何在引导程序中在div内居中内联

我已经创建了一些卡片，其中文本在图标旁边居中

现在很久以后，我被告知我必须将引导程序导入到项目中，并重新设计所有内容，但通过导入bs，它已使所有卡失去对齐。现在我正在调整它们并对内容进行灵活包装，但这似乎没有多大帮助。 `

#滑块，
包
.幻灯片内容{
保证金：0；
填充：0；
字体系列：Arial、Helvetica、无衬线字体；
溢出x：隐藏；
身高：100%；
}
.包裹{
位置：相对位置；
网格行开始：1；
网格行端：5；
}
.幻灯片{
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
身高：100%；
}
.幻灯片1{
背景图片：url（“pics/purple_jersey.jpg”）；
}
.幻灯片2{
背景图片：url（“pics/soccer_boys.jpg”）；
}
.幻灯片3{
背景图片：url（“pics/soccergirl.jpg”）；
}
.幻灯片内容{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
.幻灯片内容跨度{
字号：4rem；
颜色：#fff；
位置：绝对位置；
顶部：8px；
右：45px；
左：8px；
文本阴影：2PX2PX4PX000000；
}
.阿罗{
光标：指针；
位置：绝对位置；
最高：50%；
利润上限：-35px；
宽度：0；
身高：0；
边框样式：实心；
}
#向左箭头{
边框宽度：30px40px30px0；
边框颜色：透明#fff透明；
左：0；
左边距：30px；
}
#向右箭头{
边框宽度：30px 0 30px 40px；
边框颜色：透明#fff；
右：0；
右边距：30px；
}
.集装箱{
显示：网格；
网格模板列：2fr 1fr；
网格模板行：重复（5,20%）；
网格间距：1米；
边缘顶部：1米；
右边距：1米；
左边距：1米；
}
.页脚{
边框：2px实心#FFBB3F；
背景色：白色；
}
.卡片容器{
显示：网格；
栅隙：20px；
}
.卡片{
显示器：flex；
柔性包装：包装；
边框：2px实心#FFBB3F；
背景：白色；
颜色：黑色；
证明内容：中心；
}
.卡h1{
宽度：100%；
字号：1rem；
文本转换：大写；
文本对齐：居中；
背景色：#002664；
颜色：#FFBB3F；
边际上限：0px；
}
.ref图标{
高度：23px；
颜色：#FFBB3F；
利润上限：4倍；
}
.卡p{
宽度：80%；
}
.卡img{
保证金：自动；
}
.卡*{
边际上限：0；
}
.社交{
显示器：flex；
证明内容：之间的空间；
利润率：7px；
填充：7px；
}
.捐赠按钮{
字体大小：20px；
背景色：#002664；
边界：无；
颜色：白色；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
利润：4倍2倍；
光标：指针；
}
.捐赠按钮：悬停{
盒影：0 12像素16像素0 rgba（0,0,0,0.24），0 17像素50像素0 rgba（0,0,0,0.19）；
}
.fa fa facebook官方：悬停{
盒影：0 12像素16像素0 rgba（0,0,0,0.24），0 17像素50像素0 rgba（0,0,0,0.19）；
}
.fa fa facebook官方{
颜色：#002664；
}

志愿者：成为一名教练
志愿者：成为一名教练
志愿者：成为一名教练
春季登记开放
2019年春季的核心注册现已开放

核心冬季时间表
核心冬季计划表已发布，可供查阅

成为教练/裁判
青少年冬季裁判课程现已开始报名

现场状态
冬季周一、周三、周六和周日课程有空缺

捐赠
让sliderImages=document.querySelectorAll（“.slide”），
arrowLeft=document.querySelector（“箭头左”），
arrowRight=document.querySelector（#箭头右键”），
电流=0；
//清除所有图像
函数重置（）{
for（设i=0；i

你能试试这个吗

 <div class="card">
         <h1>Spring Registration Open</h1>
         <div class="flx">
            <div> 
               <i class="fa fa-pencil-square-o fa-3x" aria-hidden="true"></i>
            </div>
            <div>
               <p>Core registration for Spring 2019 is now open. <a href="#">Register here</a></p>
            </div>
         </div>
      </div>

---

使用网格系统的引导，这里我们定义了两列，第一列使用

col-lg-2

，第二列使用

col-lg-10

：

核心冬季时间表
同侧眼睑

---

在

中检查此项，您现在没有使用引导。为此，您应该将自己的类替换为BS类。阅读有关BS网格系统的文档

.flx {
    display: flex;
    align-items: center;
}

.flx>div {
    padding: 1rem;
}

  <div class='row'>
      <h1>CORE WINTER SCHEDULE</h1>
       <div class='col-lg-2'>
           <i class="fa fa-list-ol fa-3x" aria-hidden="true"></i>
       </div>
       <div class='col-lg-10'>
           <p>Lorem Ipsum</p>
       </div>
  </div>