我有以下代碼,並且我無法獲取header-loggedout
div中的文本以在邊框內居中顯示。如果我調整div的高度,垂直邊距或填充,則總是會因爲某種原因而將底部邊框向下移動。圖像和文字不會正確對齊。如何將文本和圖像保持在(至少大致)相同的位置,但是將兩個垂直對齊到頂部/底部邊界之間的中間位置?無法對齊圖像旁邊的文本
.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>
添加代碼的jsfiddle –
@LaljiTadhani它已經存在,直接上面的代碼。 – vaindil
一切都必須在一個div?這可能會更容易,如果你可以直接垂直對齊圖像。 – BSMP