c# - ロゴを正確に中央に揃えます

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 -->

画像を中央に、ドロップダウン ボックスを右上隅に揃えようとしています。現在、私はそれを行うことができますが、画像はわずかに左にあります. ドロップダウンボックスのみを削除すると、中央に表示されます。システム ブラウザではわかりませんが、これはモバイル Web サイトであり、モバイル ビューでは違いがわかります。

Answer 1

探しているものを実現する1つの方法は次のとおりです。

http://jsfiddle.net/NzZak/

Answer 2

あなたは絶対にドロップダウンを配置することができます-デモ

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 -->

「header_logo_holder」のCSSコード

#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 */
}

これはその問題を解決します。