境界線との垂直方向のアラインメント

Question

私はすべてを試したと言いたいと思いますが、私はそれが本当であると信じることを拒否します。私はdiv内の画像を垂直に整列しようとしています。それがうまくいったように見えましたが、私は、画像よりも上にスペースがあることに気付きました。

デバッグ後、box-sizing: border-boxが問題であることがわかりました。しかし、私はブートストラップを使用しているため（それはそれに依存しているようです）、私はそれを変更することはできません。

下のスニペットを参照してください。ボックスサイズをオンまたはオフにするには、[ボックスサイズの切り替え]をクリックします。

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

私はあなたたちが私を助けることができると思います。

Answer 1

フレックスボックスを使用できるかどうかはわかりませんが、ここを中央に保つ方法があります。

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/

Answer 2

ボーダーボトムに問題があります。
80（問題はあなたが固体2pxとして80pxとborderするheightを設定し、これはあなたのline-height:80pxラインがあなたの意図した結果を78pxする必要があることを意味し box-shadow: 0 2px 0 #3d566e;

JSFiddle example

Answer 3

で border-bottom: 2px solid #3d566e;を交換してください - 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>