Bootstrap центральный блок не центрирует изображение

Question

Я добавил класс 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>
?>

Answer 1

Вы можете использовать код ниже:

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

Answer 2

если вы добавили загрузочный CSS-URL-адрес для загрузки, тогда это работает хорошо, в противном случае вы пишете простой код CSS здесь ...

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

или просматриваете jsfiddle Demo

Спасибо

Answer 3

Не добавляйте его как класс, в этом теге 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?>