Вертикальное выравнивание конфликтует с рамкой

Question

Я хочу сказать, что я попробовал все, но я отказываюсь верить, что это правда. Я пытаюсь выровнять изображение по вертикали внутри div. Хотя это выглядело, как будто это сработало, я заметил, что над изображением было больше места, чем ниже.

После некоторой отладки я обнаружил, что box-sizing: border-box была проблема. Но поскольку я использую Bootstrap (и кажется, что это зависит от него), я не могу его изменить.

Смотрите мой фрагмент ниже. Нажмите "Переключить размер окна", чтобы включить или выключить размер окна.

var toggled = false;
$('#toggle').on('click', function() {
  if (!toggled) {
      $('*').css('box-sizing', 'border-box');
        toggled = true;
    } else {
      $('*').css('box-sizing', 'initial');
        toggled = false;
    }
});

.left-sidebar {
    width: 180px;
    background-color: #34495e;
}
.left-sidebar .user-menu {
    height: 80px;
    position: relative;
    padding: 0 15px;
    color: #fff;
    line-height: 80px;
    border-bottom: 2px solid #3d566e;
}
.left-sidebar .user-menu img {
    vertical-align: middle;
    border-radius: 50%;
}
.left-sidebar .user-menu .user-info {
    margin-left: 5px;
    font-size: 16px;
    font-weight: 300;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="toggle">Toggle box-sizing</button>

<nav class="left-sidebar">
    <div class="user-menu">
        <img src="https://placehold.it/50x50">
        <span class="user-info">Someone</span>
    </div>
</nav>
<!-- .left-sidebar -->

Надеюсь, вы, ребята, сможете мне помочь.

Answer 1

Не уверен, что вы можете использовать flexbox, но вот способ сохранить его по центру.

var toggled = false;
$('#toggle').on('click', function() {
  if (!toggled) {
      $('*').css('box-sizing', 'border-box');
        toggled = true;
    } else {
      $('*').css('box-sizing', 'initial');
        toggled = false;
    }
});

.left-sidebar {
    width: 180px;
    background-color: #34495e;
}
.left-sidebar .user-menu {
    display: flex; /* added */
    align-items: center; /* added */
    /* height: 80px; || removed */
    line-height: 80px; /* kept */
    /* position: relative; || removed */
    padding: 0 15px;
    color: #fff;
    border-bottom: 2px solid #3d566e;
    padding-top: 4px; /* added to negate border-bottom */
}
.left-sidebar .user-menu img {
    /* vertical-align: middle; || removed */
    border-radius: 50%;
}
.left-sidebar .user-menu .user-info {
    margin-left: 5px;
    font-size: 16px;
    font-weight: 300;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="toggle">Toggle box-sizing</button>

<nav class="left-sidebar">
    <div class="user-menu">
        <img src="https://placehold.it/50x50">
        <span class="user-info">Someone</span>
    </div>
</nav>
<!-- .left-sidebar -->

играть на скрипке

https://jsfiddle.net/Hastig/efoyyms4/7/

Answer 2

Проблема была в том, что вы поставили height быть 80px а также border как твердое тело 2px это означает, что ваш line-height:80px линия должна быть 78px для вашего намеченного результата (80 - 2)

.left-sidebar {
    width: 180px;
    background-color: #34495e;
}
.left-sidebar .user-menu {
    height: 80px;
    position: relative;
    padding: 0 15px;
    color: #fff;
    line-height: 78px;
    border-bottom: 2px solid #3d566e;
}
.left-sidebar .user-menu img {
    vertical-align: middle;
    border-radius: 50%;
}
.left-sidebar .user-menu .user-info {
    margin-left: 5px;
    font-size: 16px;
    font-weight: 300;
}

<nav class="left-sidebar">
    <div class="user-menu">
        <img src="https://placehold.it/50x50">
        <span class="user-info">Someone</span>
    </div>
</nav>

Answer 3

Граница дна создает проблемы.
Попробуй заменитьborder-bottom: 2px solid #3d566e; сbox-shadow: 0 2px 0 #3d566e;

Пример JSFiddle