Контексты вертикального выравнивания с рамкой поля

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

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

См. Мой фрагмент ниже. Нажмите «Toggle box-sizing», чтобы включить или отключить размер окна.

var toggled = false; 
 
$('#toggle').on('click', function() { 
 
\t \t if (!toggled) { 
 
    \t \t $('*').css('box-sizing', 'border-box'); 
 
     toggled = true; 
 
    } else { 
 
    \t \t $('*').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 -->

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

источник

2016-08-26 SomeCode

Я думаю, что это не коробчатую проклейки. Можете ли вы играть с .left-sidebar .user-menu class line-height: 78px – San

@Paulie_D Я понимаю, не думал об использовании Stack Snippet. Обновлен мой вопрос, чтобы заменить JSFiddle. – SomeCode

@San Я пробовал играть с высотой линии, но мне пришлось установить ее в 75px странно, чтобы изображение было сосредоточено. – SomeCode

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

var toggled = false; 
 
$('#toggle').on('click', function() { 
 
\t \t if (!toggled) { 
 
    \t \t $('*').css('box-sizing', 'border-box'); 
 
     toggled = true; 
 
    } else { 
 
    \t \t $('*').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/

источник

2016-08-26 13:30:42

Эй, это решило мою проблему! Вместо того, чтобы использовать ваш padding-top: 4px; ', я установил' line-height: 78px', так как в этом случае лучше всего работал. – SomeCode

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

JSFiddle example

источник

2016-08-26 13:08:19

Это не улучшает работу в Chrome – Hughzi

Исходные файлы -webkit & -moz. Вам нужно будет переписать стиль с помощью этого: -webkit-box-sizing, -moz-box-size и box-size. –

Проблема была установить 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>

источник

2016-08-26 13:14:46 Hughzi

Уже пробовал это, но размер окна все еще испортил его. И, как ни странно, мне пришлось изменить высоту линии до 75 пикселей, чтобы она работала. – SomeCode

Я снял коробку, потому что это вызывало проблемы, извините, никогда не упоминалось в моем ответе – Hughzi

Контексты вертикального выравнивания с рамкой поля

ответ

Смежные вопросы