準確地將徽標對準中心

Question

CSS: 
#header_bar 
{ 
background-repeat: repeat-x; 
width:100%; 
} 

.langpnl 
{ 
float:right; 
padding-top: 2px; 
padding-right: 0px; 
position:relative; 
width:45px; 
height:16px; 
font-size:7pt; 
} 

#imgLogo 
{ 
width: 156px; 
height: 42px; 
} 

<!-- header.ascx --> 
<div id="header_bar"> 
<div align="center"> 
    <a href="<%=AppPath%>" target="_parent" > 
     <img id="imgLogo" runat="server" src="~/images/UI/logo.jpg" border="0" /></a> 
     <asp:DropDownList ID="ddlLanguage" class="langpnl" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlLanguage_SelectedIndexChanged"> 
     <asp:ListItem Value="">EN</asp:ListItem> 
     <asp:ListItem Value="es-ES">ES</asp:ListItem> 
    </asp:DropDownList> 
    </div> 
</div> 
<!-- /header.ascx --> 

我試圖將中心的圖像和下拉框對齊到右上角。目前我能夠做到這一點，但圖片左側略顯。如果我只刪除下拉框，那麼它就會在中心。 在系統瀏覽器中，你無法弄清楚，但這是一個移動網站&在移動視圖中，你可以找出差異。

Answer 1

這裏有一種方法來實現你在找什麼：

http://jsfiddle.net/NzZak/

Answer 2

你可以絕對定位下拉 - DEMO

Answer 3

<!-- header.ascx --> 
<div id="header_bar"> 
<div id="header_logo_holder"> 
    <a href="<%=AppPath%>" target="_parent" > 
     <img id="imgLogo" runat="server" src="~/images/UI/logo.jpg" border="0" /></a> 
     <asp:DropDownList ID="ddlLanguage" class="langpnl" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlLanguage_SelectedIndexChanged"> 
     <asp:ListItem Value="">EN</asp:ListItem> 
     <asp:ListItem Value="es-ES">ES</asp:ListItem> 
    </asp:DropDownList> 
    </div> 
</div> 
<!-- /header.ascx --> 

CSS代碼爲 「header_logo_holder」

#header_logo_holder { 
width: 156px; 
margin:0px auto 0px auto; 
} 

Answer 4

由於您的.langpnl有一個position:relative它仍然佔用您的定位流量的空間。
嘗試：

.langpnl { 
    position:absolute; 
    right: 0; 
} 
#header_bar { 
    position: relative; 
} 

Answer 5

#header_bar { 
    background-repeat: repeat-x; 
    width: 100%; 
    padding: 0; 
    margin: 0; /* New */ 
} 

.langpnl { 
    float: right; 
    padding-top: 2px; 
    padding-right: 0px; 
    position: relative; 
    width: 45px; 
    height: 16px; 
    font-size: 7pt; 
    vertical-align: top; /* New */ 
} 

#imgLogo { 
    width: 130px; 
    height: 35px; 
    text-align: center; 
    border:0px; /* New */ 
} 

這解決了這個問題。