代码之家 › 专栏 › 技术社区 › Muiter

引导程序中心块不居中图像

bootstrap-4 css

-4

Muiter · 技术社区 · 7 年前

我增加了这个班 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>
?>

3 回复 | 直到 7 年前

1

Mahmoud 7 年前

您可以使用以下代码:

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%);
}

2

0

Md. Abu Sayed 7 年前

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

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

或视图 jsfiddle Demo

谢谢你

3

-2

Thomas Ayling 7 年前

不要将其作为类添加,在该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?> 标签