Html 接触段不会集中

我有一个问题，我似乎无法集中我的联系信息。下面是我的代码，它将所有带有文本的小徽标推到网页的一侧。 然而，我的最终目标是将它们放在一行中。欢迎任何帮助

.media{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit框对齐：开始；
-ms-flex-align：开始；
对齐项目：flex start
}
.媒体机构{
-webkit-box-flex:1；
-ms-flex:1；
弹性：1
}

巴顿伍德，加利福尼亚州。
宾夕法尼亚州罗斯伍德利750918

+2 257 995 2885
星期一至五上午7时至下午6时

support@testemail.com
随时给我们发信息

试试这个

.media{
/*显示：-网络工具包盒*/
显示：-ms flexbox；
显示器：flex；
-webkit框对齐：开始；
-ms-flex-align：开始；
调整项目：灵活启动；
浮动：左；
文本对齐：居中；
利润率：0.17px；
}
.媒体机构{
宽度：100%；
}

巴顿伍德，加利福尼亚州。
宾夕法尼亚州罗斯伍德利750918

+2 257 995 2885
星期一至五上午7时至下午6时

support@testemail.com
随时给我们发信息

这里您正在使用flexbox。如果你想让所有的孩子都排在一行

只需为所有人多包装一个div，并为其提供

display:flex

<section class="contact-section">
     <div class="col-lg-3 offset-lg-1">
       <div class="media-wrapper">
         <div class="media contact-info"></div>
         <div class="media contact-info"></div>
         <div class="media contact-info"></div>
       </div>
    </div>
</section>

以知识为目的

只需在父css（即.media wrapper）中放入以下行即可调整子元素

对于水平对齐-

对齐内容：居中/柔性起点/柔性终点

对于垂直对齐
对齐项目：中心/柔性起点/柔性终点

对于方向
flex direction:row
或
flex direction:column

注意：当方向改变时，内容对齐和项目对齐都会交换其性质。

更多信息。你可以参观

重新构造HTML代码并使用flex设置样式。希望这对您有所帮助

 <section>
     <div class="contact-section">
        <div class="address">
       <span class="contact-info__icon"><i class="ti-home"></i></span>
            <div class="media-body">
                <h3>Buttonwood, California.</h3>
                <p>Rosewoodly, PA 750918</p>
            </div>
        </div>
        <div class="contactInfo">
            <span class="contact-info__icon"><i class="ti-tablet"></i></span>
            <div class="media-body">
                <h3>+2 257 995 2885</h3>
                <p>Mon to Fri 7am to 6pm</p>
            </div>
        </div>
        <div class="email">
            <span class="contact-info__icon"><i class="ti-email"></i></span>
            <div class="media-body">
                <h3>support@testemail.com</h3>
                <p>Send us a message anytime!</p>
            </div>
        </div>
    </div>

发送您想做的事情的图像，试试看
display:inline block
Hi Simasan。不幸的是，我对你的问题很不清楚。但是，如果您的目标是将项目安排在一个水平行中，我想
flex direction:row
是一个不错的选择。是的，很抱歉，这是我第一次发帖或问任何问题。但是，是的，我的目标是在水平行中排列元素以及它们的徽标图像。我已使用所需结果的图像更新了帖子。没有工作。它将我的项目排列在联系人表单旁边，而不是将它们放在水平行的顶部/好的，你在同一行也有联系方式吗？我的联系方式实际上在下面的另一行。这样地。差不多就是这样，我不知道为什么它不起作用。我这样做了，元素捕捉到了一条水平线。然而，由于某种原因，它们中的文本和联系方式变成了一列。完全不一致。无论如何要解决这个问题？你能更新当前位置的屏幕截图吗？更新了屏幕截图，你可以看一看。你是否删除了其他用户以前建议的解决方案？是：）这是为每个建议的解决方案所做的。
 <section>
     <div class="contact-section">
        <div class="address">
       <span class="contact-info__icon"><i class="ti-home"></i></span>
            <div class="media-body">
                <h3>Buttonwood, California.</h3>
                <p>Rosewoodly, PA 750918</p>
            </div>
        </div>
        <div class="contactInfo">
            <span class="contact-info__icon"><i class="ti-tablet"></i></span>
            <div class="media-body">
                <h3>+2 257 995 2885</h3>
                <p>Mon to Fri 7am to 6pm</p>
            </div>
        </div>
        <div class="email">
            <span class="contact-info__icon"><i class="ti-email"></i></span>
            <div class="media-body">
                <h3>support@testemail.com</h3>
                <p>Send us a message anytime!</p>
            </div>
        </div>
    </div>

.contact-section{ display:flex;}