时间戳

首页 > 解决方案 > 如何使用引导程序将大于其容器的段落元素居中？

html - 如何使用引导程序将大于其容器的段落元素居中？

问题描述

我正在尝试将以下大于其容器的段落元素（电子邮件）居中：

在此处输入图像描述

我的代码如下：

    <div class="col-lg-2 col-lg-offset-1 text-center">
        <a href="mailto:{{ site.email }}">
        <i class="fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".1s"></i>
            <p>{{ site.email }}</p>
        </a>
    </div>

我试图直接在我的段落元素上使用 text-center ，但这不起作用，我怎样才能使这个元素居中？

标签： htmlcssbootstrap-4

解决方案

有很多方法可以实现它。我更喜欢的是位置。

  • 确保容器或父元素具有相对位置。
  • 将这些样式属性添加到段落 position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);

我希望这会对你有所帮助

推荐阅读