Изображение центра вертикально в родительской строке

Question

Я пытаюсь центрировать изображение вертикально внутри родительского контейнера для жидкости.

Here is a fiddle that outlines the problem.

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-2 col-sm-4 col-xs-4 col-xxs-4"> 
     <div class=""> 
      <a href="#"><img id="logo" class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnfIk3IX1dY-okcqPH5BX_L0XF2z31qwP-MD0nijTdAGc2alNc4Q" style="vertical-align: middle;" alt="logo here"/></a> 
     </div> 
     </div> 
     <div class="col-md-10 col-sm-8 col-xs-8 col-xxs-8"> 
     <div class="row"> 
      <div class="col-md-12"> 
      <div class=""> 
       <nav class="navbar navbar-default" role="navigation"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        </button> 
       </div> 
       <div class="collapse navbar-collapse" id="example-navbar-collapse"> 
        <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#" style="color: #1B75BB;">Search</a> 
        </li> 
        <li><a href="#" style="color: #1B75BB;">Archives</a> 
        </li> 
        <li><a href="#" style="color: #1B75BB;">About</a> 
        </li> 
        </ul> 
       </div> 
       </nav> 
      </div> 
      </div> 
     </div> 
      </div> 
     </div> 
     </div> 

Как вы можете видеть, изображение центрируется по горизонтали, но не по вертикали. Выполнение таких действий, как установка поля, даже родительского контейнера, похоже, не работает. Похоже, это должно быть довольно просто решить, но я борюсь с этим.

Answer 1

Существует два способа центрирования элементов по вертикали внутри других элементов, оба из которых зависят от стилей родительского контейнера. Одним из них является, чтобы установить высоту строки такой же, как высота контейнера, а другой использовать ячейки таблицы:

img { 
 
    height: 25px; 
 
    width: 25px: 
 
} 
 
.container { 
 
    height: 50px; 
 
    width: 50px; 
 
    text-align: center; 
 
    border:1px solid; 
 
} 
 
.one { 
 
    line-height: 50px; /* Same as container height */ 
 
} 
 
.container.two { 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
}

<div class="container one"> 
 
    <a href="#"> 
 
    <img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnfIk3IX1dY-okcqPH5BX_L0XF2z31qwP-MD0nijTdAGc2alNc4Q" style="vertical-align: middle;" alt="logo here" /> 
 
    </a> 
 
</div> 
 
<br /> 
 
<div class="container two"> 
 
    <a href="#"> 
 
    <img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnfIk3IX1dY-okcqPH5BX_L0XF2z31qwP-MD0nijTdAGc2alNc4Q" style="vertical-align: middle;" alt="logo here" /> 
 
    </a> 
 
</div>

Answer 2

Что об этом? Просто дайте внешнему div классу imagecontainer, используйте вспомогательный класс с display: inline-block; и приложите этот атрибут к img рядом с ним, чтобы он был вертикально центрирован рядом с диапазоном.

HTML:

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-2 col-sm-4 col-xs-4 col-xxs-4"> 
     <div class="imagecontainer"> 
      <span class="helper"></span> 
      <a href="#"><img id="logo" class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnfIk3IX1dY-okcqPH5BX_L0XF2z31qwP-MD0nijTdAGc2alNc4Q" alt="logo here"/></a> 
     </div> 
     </div> 
     <div class="col-md-10 col-sm-8 col-xs-8 col-xxs-8"> 
     <div class="row"> 
      <div class="col-md-12"> 
      <div class=""> 
       <nav class="navbar navbar-default" role="navigation"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        </button> 
       </div> 
       <div class="collapse navbar-collapse" id="example-navbar-collapse"> 
        <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#" style="color: #1B75BB;">Search</a> 
        </li> 
        <li><a href="#" style="color: #1B75BB;">Archives</a> 
        </li> 
        <li><a href="#" style="color: #1B75BB;">About</a> 
        </li> 
        </ul> 
       </div> 
       </nav> 
      </div> 
      </div> 
     </div> 
      </div> 
     </div> 
     </div> 

CSS:

.imagecontainer { 
    height: 25px; 
    white-space: nowrap; 
    text-align: center; 
    margin: 1em 0; 
} 
.img-responsive { 
    vertical-align: middle; 
    height: 25px; 
    display: inline-block 
} 
.helper { 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 

https://jsfiddle.net/DTcHh/10286/

Ответ был изящно адаптирован из How to vertically align an image inside div

Answer 3

Я сделал это по-другому, делая " «иметь фон» изображения и сопоставления высоты https://jsfiddle.net/tonytansley/gu8b6yxk/1/

#logo { 
    margin: 0 auto; 
    background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnfIk3IX1dY-okcqPH5BX_L0XF2z31qwP-MD0nijTdAGc2alNc4Q'); 
    display: inline-block; 
    width: 100%; 
    height: 52px; 
    max-height: 100%; 
    background-size: 45px; 
    background-repeat: no-repeat; 
    background-position: 50% 50%; 
} 

А затем принимать изображение из «а» теге

<a href="#" id="logo"></a>