垂直对齐与边框框冲突

Question

我想说我什么都试过了，但我不相信那是真的。我正在尝试垂直对齐 div 内的图像。虽然它看起来有效，但我注意到图像上方的 space 比下方多。

经过调试，发现是box-sizing: border-box的问题。但是因为我用的是Bootstrap（而且好像依赖它），所以没法改。

请参阅下面的代码片段。单击 'Toggle box-sizing' 以打开或关闭框大小调整。

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

边框底部制作有问题。
尝试更换 border-bottom: 2px solid #3d566e; 与 box-shadow: 0 2px 0 #3d566e;

JSFiddle example

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

不确定是否可以使用 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 -->

fiddle

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

垂直对齐与边框框冲突

Vertical align conflicts with border box

html

css

box-sizing