引导中心块未居中图像答案

【问题标题】：Bootstrap center-block is not centering image引导中心块未居中图像
【发布时间】：2018-10-30 11:09:45
【问题描述】：

我添加了 center-block 类，以便能够将 Torza 图像垂直居中。但是没有结果，有什么建议吗？

<?php
<div class="container">
    <hr />
        <div class="text-center center-block">
                <a href="https://torza.nl" target="_blank"><img src="img/logo_torza.png" alt="Torza" width="85"></a>
                <a href="https://torza.nl" target="_blank"><i class="fa fa-globe fa-2x social"></i></a>
                <a href="https://www.linkedin.com/company/torza/" target="_blank"><i class="fa fa-linkedin-square fa-2x social"></i></a>
                <a href="https://www.facebook.com/torzanl" target="_blank"><i class="fa fa-facebook-square fa-2x social"></i></a>
                <a href="mailto:info@torza.nl"><i class="fa fa-envelope-square fa-2x social"></i></a>
        </div>
    <hr />
    </div>
?>

【问题讨论】：

center-block 用于水平居中，请提供您的 CSS
你能把你的css和链接添加到你的图片吗
请显示与此 html 一起使用的 css

标签： css bootstrap-4

【解决方案1】：

不要将它添加为一个类，在那个 div 标签中使用这个：

<div style="text-align:center, margin-left:auto, margin-right:auto>

我不知道为什么这是在 php 标签中，除非你回显它，否则它不适用于 html。

要么去掉php标签，要么在开头写echo"，最后写";

要么用这个替换它：

<?php
echo"
<div class="container">
    <hr />
        <div class="text-center center-block">
                <a href="https://torza.nl" target="_blank"><img src="img/logo_torza.png" alt="Torza" width="85"></a>
                <a href="https://torza.nl" target="_blank"><i class="fa fa-globe fa-2x social"></i></a>
                <a href="https://www.linkedin.com/company/torza/" target="_blank"><i class="fa fa-linkedin-square fa-2x social"></i></a>
                <a href="https://www.facebook.com/torzanl" target="_blank"><i class="fa fa-facebook-square fa-2x social"></i></a>
                <a href="mailto:info@torza.nl"><i class="fa fa-envelope-square fa-2x social"></i></a>
        </div>
    <hr />
</div>
";
?>

或者干脆去掉<?php?>标签

【讨论】：

【解决方案2】：

您可以使用下面的代码：

HTML

<div class="container">
    <hr />
        <div class="torza-box">
              <a href="https://torza.nl" target="_blank"><img src="img/logo_torza.png" alt="Torza" width="85"></a>
              <div class="links-box">
                   <a href="https://torza.nl" target="_blank"><i class="fa fa-globe fa-2x social"></i></a>
                   <a href="https://www.linkedin.com/company/torza/" target="_blank"><i class="fa fa-linkedin-square fa-2x social"></i></a>
                   <a href="https://www.facebook.com/torzanl" target="_blank"><i class="fa fa-facebook-square fa-2x social"></i></a>
                   <a href="mailto:info@torza.nl"><i class="fa fa-envelope-square fa-2x social"></i></a></div>
           </div>
    <hr />
</div>

CSS

.torza-box{
   position:relative;
}

.links-box{
   position:absolute;
   top:50%;
   right:10px;
   transform:translatey(-50%);
}

【讨论】：

【解决方案3】：

如果您添加了引导 CSS URL，那么它也可以正常工作，否则您可以在这里编写简单的 CSS 代码...

.center-block a {
  display:inline-block;
  vertical-align:middle;
}

或查看jsfiddle Demo

谢谢

【讨论】：