在 div 中居中定位標簽

Question

我有一個包含圖像的錨點，我想將它放在引導程序導航欄的 div 標簽中

圖像的高度和寬度未知，因此我想將其水平和垂直居中而無需計算填充

<div class="navbar-header">
    <a class="navbar-left" href="index.html"><span role="link" class="logo"></span></a>
</div>

.navbar-header{
    width: 250px;
    height: 60px;
    float: left;
}

.navbar-left{
    float: left!important;
}

.logo {
    background-image: url(/image.png);
    background-position: center;
    background-size: 100%;
    border: none;
    display: block;
    height: 51px;
    width: 185px;
    margin: 0;
    text-indent: -9999px;
}

Answer 1

我強烈推薦以下文章： https : //css-tricks.com/centering-css-complete-guide/

 .navbar-header{ width: 250px; height: 60px; float: left; background-color: rgba(255,0,0,0.1); position: relative; } .navbar-left{ /* float: left!important; */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .logo { background-image: url(https://picsum.photos/id/10/555/153); background-position: center; background-size: 100%; border: none; display: block; height: 51px; width: 185px; margin: 0; padding: 0; text-indent: -9999px; }

 <div class="navbar-header"> <a class="navbar-left" href="index.html"> <span role="link" class="logo"></span> </a> </div>

Answer 2

刪除此 CSS

.navbar-left{
    float: left!important;
}

在徽標上添加邊距0 auto

.logo {
    background-image: url(/image.png);
    background-position: center;
    background-size: 100%;
    border: none;
    display: block;
    height: 51px;
    width: 185px;
    margin: 0 auto;/*Edit This*/
    text-indent: -9999px;
}