Css 如何在Bootstrap 4中水平居中放置媒体对象的内容

我有一个模式窗口，显示媒体对象中带有语音气泡的图像，如下所示：

.profile{
最大宽度：7em；
}
.演讲{
颜色：#808080；
位置：相对位置；
背景#f1f1；
边框：1px实心#EFEF；
边界半径：3px；
填充：15px；
}
.演讲稿：：之后{
内容：“；
宽度：15px；
高度：15px；
显示：块；
背景#f1f1；
边框：1px实心#EFEF；
边框宽度：0 1px 1px；
位置：绝对位置；
左：-8px；
底部：20px；
变换：旋转（-46度）；
}
.结束{
位置：绝对位置；
右：20px；
}
.媒体img{
右边距：30px；
}

启动演示模式
情态标题
&时代；

废话废话。

您可以将此规则添加到CSS中，以将flex项置于其容器的中心：

.media {
  justify-content: center;
}

.profile{
最大宽度：7em；
}
.演讲{
颜色：#808080；
位置：相对位置；
背景#f1f1；
边框：1px实心#EFEF；
边界半径：3px；
填充：15px；
}
.演讲稿：：之后{
内容：“；
宽度：15px；
高度：15px；
显示：块；
背景#f1f1；
边框：1px实心#EFEF；
边框宽度：0 1px 1px；
位置：绝对位置；
左：-8px；
底部：20px；
变换：旋转（-46度）；
}
.结束{
位置：绝对位置；
右：20px；
}
.媒体img{
右边距：30px；
}
.媒体{
证明内容：中心；
}

启动演示模式
情态标题
&时代；

废话废话。