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，但这是一种让它保持居中的方法。

＆＃13;

mtcars %>% 
  filter(hp > 1) %$%
  for(i in 1:ncol(.)) {
    print(.[1,i])
  }

[1] 21
[1] 6
[1] 160
[1] 110
[1] 3.9
[1] 2.62
[1] 16.46
[1] 0
[1] 1
[1] 4
[1] 4

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<强>拨弄

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

Answer 2

边境底部正在制造问题。
尝试更换 border-bottom: 2px solid #3d566e; box-shadow: 0 2px 0 #3d566e;

JSFiddle example

Answer 3

问题在于您将channels[0].additional_vip_channels[0].channel_name设为height，将80px设为实体border，这意味着您的2px行必须为line-height:80px }为您的预期结果（80 - 2）

78px

.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;
}

垂直对齐与边框框冲突

3 个答案: