准确地将徽标对准中心

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

我试图将中心的图像和下拉框对齐到右上角。目前我能够做到这一点，但图片左侧略显。如果我只删除下拉框，那么它就会在中心。在系统浏览器中，你无法弄清楚，但这是一个移动网站&在移动视图中，你可以找出差异。准确地将徽标对准中心

来源

2012-09-10 Scorpio

align =“center”已被弃用一段时间了：http://www.w3schools.com/tags/att_div_align.asp –

这是一个客户端问题。请显示您的结果HTML，而不是您的ASP代码。 –

这里有一种方法来实现你在找什么：

http://jsfiddle.net/NzZak/

来源

2012-09-10 15:39:02

谢谢..它使用小修改 – Scorpio

@Scorpio - 不用担心:) –

你可以绝对定位下拉 - DEMO

来源

2012-09-10 15:39:29 Ana

<!-- 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; 
}

来源

2012-09-10 15:39:54

由于您的.langpnl有一个position:relative它仍然占用您的定位流量的空间。
尝试：

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

来源

2012-09-10 15:39:56 Scrimothy

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

这解决了这个问题。

来源

2012-09-10 16:27:06

准确地将徽标对准中心

回答

相关问题