[英]Xamarin: How can I align a logo image in the center of a SkiaSharp Bitmap
[英]Align logo exactly in the center
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 -->
我正在嘗試將中心和下拉框中的圖像對齊到右上角。 目前,我可以執行此操作,但是圖像在左側有點小。 如果僅刪除下拉框,則它將位於中間。 在系統瀏覽器中,您無法弄清楚,但這是一個移動網站,在移動視圖中,您可以找出兩者之間的區別。
這是實現您要尋找的東西的一種方法:
您可以絕對定位下拉菜單- 演示
<!-- 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;
}
由於您的.langpnl
具有position:relative
因此它仍會占用定位流中的空間。
嘗試:
.langpnl {
position:absolute;
right: 0;
}
#header_bar {
position: relative;
}
#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 */
}
這解決了這個問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.