無法對齊圖像旁邊的文本

我有以下代碼，並且我無法獲取header-loggedout div中的文本以在邊框內居中顯示。如果我調整div的高度，垂直邊距或填充，則總是會因爲某種原因而將底部邊框向下移動。圖像和文字不會正確對齊。如何將文本和圖像保持在（至少大致）相同的位置，但是將兩個垂直對齊到頂部/底部邊界之間的中間位置？無法對齊圖像旁邊的文本

Here's a fiddle.

.header-lower { 
 
    position: relative; 
 
    display: table; 
 
    z-index: 0; 
 
    padding: 10px 0px; 
 
    width: 100%; 
 
    border-top: 1px solid #ddd; 
 
    border-bottom: 1px solid #ddd; 
 
} 
 
.header-logo { 
 
    display: table-cell; 
 
    text-align: left; 
 
    margin: 0 0 20px; 
 
    vertical-align: inherit !important; 
 
} 
 
.header-logo a { 
 
    display: inline-block; 
 
    float: left; 
 
    max-width: 100%; 
 
    line-height: 0; 
 
} 
 
.header-loggedout { 
 
    font-size: 26px; 
 
    vertical-align: middle; 
 
}

<div class="header-lower"> 
 
    <div class="header-logo"> 
 
    <a href="#"> 
 
     <img title="" alt="alt" src="http://placehold.it/310x39" /> 
 
    </a> 
 
    </div> 
 
    <div class="header-loggedout"> 
 
    Test Text 
 
    </div> 
 
</div>

來源

2015-10-16 vaindil

添加代碼的jsfiddle –

@LaljiTadhani它已經存在，直接上面的代碼。 – vaindil

一切都必須在一個div？這可能會更容易，如果你可以直接垂直對齊圖像。 – BSMP

您可以設置.header-loggedout顯示爲table-cell：

.header-loggedout { 
    font-size: 26px; 
    vertical-align: middle; 
    display: table-cell; 
}

Fiddle Here

來源

2015-10-16 17:24:02

更換此類

.header-lower { 
    border-bottom: 1px solid #ddd; 
    border-top: 1px solid #ddd; 
    display: table; 
    padding: 10px 0; 
    position: relative; 
    text-align: center; 
    vertical-align: middle; 
    width: 100%; 
    z-index: 0; 
}

來源

2015-10-16 17:17:06

你能否給我們一個解釋爲什麼你提出的CSS會起作用，而不是隻給CSS？ –

您可以使用絕對定位 Fiddle here

.header-loggedout { 
     font-size: 26px; 
     position:absolute; 
     top:50%; 
     right: 20px; 
     transform: translateY(-50%); 
    }

來源

2015-10-16 17:17:31 1Bladesforhire

無法對齊圖像旁邊的文本

回答

相關問題