Vertical align conflicts with border box

Question

I want to say that I've tried everything, but I refuse to believe that's true. I'm trying to vertical-align an image inside a div. Although it looked like it worked, I noticed there was more space above the image than below.

After some debugging, I found that box-sizing: border-box was the problem. But because I'm using Bootstrap (and it seems it relies on it), I can't change it.

See my snippet below. Click 'Toggle box-sizing' to turn box-sizing on or off.

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 -->

I hope you guys can help me out.

I think it is not box-sizing. Can you play with .left-sidebar .user-menu class line-height: 78px — San, Aug 26 '16 at 13:08
@Paulie_D I get your point, didn't think of using a Stack Snippet. Updated my question to replace the JSFiddle. — SomeCode, Aug 26 '16 at 13:35
@San I tried playing with the line-height, but I had to set it to a weirdly 75px in order for the image to be centered. — SomeCode, Aug 26 '16 at 13:41

score 1 · Accepted Answer · answered Aug 26 '16 at 13:30

Not sure if you can use flexbox but here's a way to keep it centered.

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/

Whoah, this solved my problem! Instead of using your `padding-top: 4px;`, I set `line-height: 78px` as that worked best in this case. — SomeCode, Aug 26 '16 at 13:51

score 0 · Answer 2 · answered Aug 26 '16 at 13:08

0

Border bottom is making problem.
Try to replace border-bottom: 2px solid #3d566e; with box-shadow: 0 2px 0 #3d566e;

JSFiddle example

answered Aug 26 '16 at 13:08

Goran Hrustić

81
1
7

This doesn't improve things on Chrome – Hughzi Aug 26 '16 at 13:10
Bootstrap use -webkit & -moz prefixes. You'll need to overwrite style with this: -webkit-box-sizing, -moz-box-sizing & box-sizing – Goran Hrustić Aug 26 '16 at 13:16

score 0 · Answer 3 · answered Aug 26 '16 at 13:14

The problem was you set height to be 80px and border as a solid 2px this means your line-height:80px line needs to be 78px for your intended result (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>

Already tried that, but the box-sizing still messed it up. And weirdly enough, I had to change the line-height to 75px to make it work. — SomeCode, Aug 26 '16 at 13:38
i took box-sizing out because it was causing issues, sorry never mentioned in my answer — Hughzi, Aug 26 '16 at 14:29

Vertical align conflicts with border box

3 Answers3