無法獲得垂直對齊鏈接

我正在嘗試創建一個語言欄插入器，該鏈接將顯示我的網站替代版本的鏈接。到目前爲止，我有：無法獲得垂直對齊鏈接

<div id="lang_dropper_wrapper"> 
    <img src="http://www.chambresdhotesdev.org/new_design/blank.gif" class="sprite-luna"> 
    <b class="down_arrow" style="float: right;">&nbsp;</b> 
    <div id="lang_dropper"> 
     <a class="smaller lang-en" href="#">English</a> 
     <a class="smaller lang-fr" href="#"> French</a> 
     <a class="smaller lang-es" href="#">Cases rurals</a> 
     <a class="smaller lang-mobile" href="#">Mobile</a> 
    </div> 
</div>

...然後CSS：

.lang-en:before, .lang-es:before, .lang-fr:before,.lang-mobile:before { 
    content: ' '; 
    /*background: url(/new_design/sprites-all-2.png) no-repeat;*/ 
    width: 32px; 
    height: 26px; 
    display: inline-block; 
    margin-right: 20px; 
} 

.lang-en:before { 
    background: green 
} 

.lang-es:before{ 
    background: red; 
} 

.lang-fr:before{ 
    background: yellow 
} 

.lang-mobile:before{ 
    background: maroon; 
} 

#lang_dropper a:link { 
    display:block; 
    padding: 5px 5px 5px 10px; 
    font-size: 12px; 
    line-height: 30px; 
    text-align: middle; 
} 
#lang_dropper a:hover { 
    text-decoration: none; 
    background: #eee; 
} 
#lang_dropper { 
    position: absolute; 
    top: 28px; 
    left: 0px; 
    z-index: 10000000; 
    /*display: none;*/ 
    float: left; 
    min-width: 160px; 
    padding: 5px 0px; 
    margin: 2px 0px 0px; 
    background-color: #FFF; 
    border: 1px solid rgba(0, 0, 0, 0.2); 
    border-radius: 6px; 
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); 
    background-clip: padding-box; 
    width: 200px; 
} 
#lang_dropper_wrapper { 
    position: relative; 
    width: 45px; 
    float: left; 
    margin-right: 3px; 
    margin-top: 2px; 

} 
#lang_dropper_wrapper:hover { 
    cursor: pointer; 
}

我實際使用的標誌圖標的CSS精靈 - 從而在那裏混亂的東西用：前東西，併爲每一個類。

我唯一剩下的問題是讓滲血物垂直對齊！

這裏你可以看到一個工作示例：

http://codepen.io/anon/pen/BjQgRe

它完美，除了事實上，我想要的文字與標誌彩色圖標垂直對齊他們

左

我嘗試了各種各樣的東西，但只是無法讓它工作。

對此提出建議？

謝謝！

來源

2015-12-31 Andrew Newby

爲您的內嵌塊元素應用vertical-align:middle。通過default.so其實，如果你不給取顯示塊

.lang-en:before, .lang-es:before, .lang-fr:before,.lang-mobile:before { 
content: ' '; 
width: 32px; 
height: 26px; 
display: inline-block; 
margin-right: 20px; 
vertical-align:middle; /* Add this style */ 
}

DEMO

來源

2015-12-31 12:20:11

OMG - 你的傳奇！我不敢相信我沒有嘗試過。我真的一直在查看最後一小時的代碼，嘗試各種各樣的事情！我會接受這個答案，只要它會讓我:) –

歡迎:) –

它即使它是好的。

li a 
{ 
    display: block; 
}

來源

2015-12-31 12:24:42 Shrikant

<body> 
<style> 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    } 
</style> 
<div id="lang_dropper_wrapper"> 
<img src="http://www.chambresdhotesdev.org/new_design/blank.gif" class="sprite-luna"> 
<b class="down_arrow" style="float: right;">&nbsp;</b> 
<div id="lang_dropper"> 
    <ul> 
    <li><a class="smaller lang-en" href="#">English</a></li> 
    <li><a class="smaller lang-fr" href="#"> French</a></li> 
    <li><a class="smaller lang-es" href="#">Cases rurals</a></li> 
    <li><a class="smaller lang-mobile" href="#">Mobile</a></li> 
</div> 
</div> 
</body>

來源

2015-12-31 12:28:52 Shrikant

感謝您的迴應。我實際上不再使用'ul li'元素，因爲我無法正確對齊（使用僞精靈圖像） –

無法獲得垂直對齊鏈接

回答

相關問題