I have a label with in a div in ASP.NET just before a text box but I am not sure how can I center align my asp.net label,
<div style="float: left; width: 65%;">
<asp:Label ID="lba" CssClass="aa" runat="server" Text="aaa" />
</div>
In the div element add style text-align: center to center the text
<div style="float: left; width: 65%; text-align: center;">
<div style="float: left; width: 65%; text-align: center;">
<asp:Label ID="lba" CssClass="aa" runat="server" Text="aaa" />
</div>
<div style="text-align:center; width:100%;">
<asp:Lable ID="lba" style="margin:0 auto;" CssClass="aa" runat="server"/>
</div>
you can also try style="margin:0 auto;" to label and width 100% to parend div.
Related
I add these panels dynamically. They tile correctly but there is a margin on the right side still when i want it all centered. Here is a sample of the code.
<style>
.row {
display: flex;
flex-wrap: wrap;
align-content: center;
margin:auto;
flex-grow:inherit;
}
</style>
<div>
<h1 style="text-align: center;">Schedule an Appointment</h1>
</div>
<div class="panel panel-info " style="margin-left: 10%; margin-right:
10%;" runat="server">
<div class="panel-heading">
<h3 class="panel-title">Step 1: Click on A Picture to Select a
Theripist</h3>
</div>
<asp:Panel class="row container-fluid " style="text-align:center;"
ID="PicturePanel" runat="server" Height="100%" Width="100%"
HorizontalAlign="Center">
</asp:Panel>
</div>
I have two div elements inside a div element as follows.
<div style="display: inline;">
<div style="display: inline; float: left;width:90%;">
<p style="display: block; float: left;">
<%# DataBinder.Eval(Container.DataItem,"Text") %>
</p>
</div>
<div id="divImage" runat="server" style="display: inline; float: right; width: 10%;">
<a href='<%= ImagePath%><%# Eval("Image") %>'>
<img src="<%= ImagePath%><%# Eval("Image") %>" alt="Text" width="40px" height="40px" /></a>
</div>
</div>
I want to display both the child div elements with (90% and 10% width respectively) when the image path is valid. If an image is not available, I would like to hide the second child div (id:divImage). So the text would cover the entire available space. Can anyone suggest how to achieve this?
Thanks.
You can always use JQuery to do it at client side
http://api.jquery.com/css/
From server side
<div runat="server" id="divControl">...</div>
Class of the Page:
protected System.Web.UI.HtmlControls.HtmlGenericControl divControl;
OnLoad/Other function:
divControl.Style.Add("height", number / anotherNumer);
Hello All,
Above picture shows a series of images and corresponding link text. Requirment is that I need to get shrink off images and also text so that they should appear in same line in different screen resolutions...
I have used vw as font specification for font resize. But unable to get image resized using the below css...
.bannerimage {
max-width: 100%;
height: auto;
width: auto/9;/* ie8 */
overflow:hidden;
}
Design code for the ribbon is as follows:
<div style="padding-left: 50px; padding-top: 20px; height: 110px; width: 100%">
<div>
<div style="float: left">
<div style="float: left;">
<asp:ImageButton runat="server" ImageUrl="~/Images/Go_to_icon.png" CssClass="footerimage" style="min-height:30px;min-width:30px" />
</div>
<div style="top: 15px; position: relative; float: left; width: 180px">
<div class="footerlinkdiv">
<asp:LinkButton ID="LinkButton9" runat="server" CssClass="footerlink" Text="Go To Administration Page" Style="text-align: start"></asp:LinkButton>
</div>
</div>
<div class="footerseprator">
</div>
</div>
<div style="float: left">
<div style="float: left; padding-left: 20px">
<asp:ImageButton ID="ImageButton8" runat="server" ImageUrl="~/Images/Go_to_icon.png" CssClass="footerimage" />
</div>
<div style="top: 15px; position: relative; float: left; width: 180px">
<div class="footerlinkdiv">
<asp:LinkButton ID="LinkButton10" runat="server" CssClass="footerlink" Text="Go To Authorize US Partners" Style="text-align: start"></asp:LinkButton>
</div>
</div>
<div class="footerseprator">
</div>
</div>
<div style="float: left">
<div style="float: left; padding-left: 20px">
<asp:ImageButton ID="ImageButton9" runat="server" ImageUrl="~/Images/Go_to_icon.png" CssClass="footerimage" />
</div>
<div style="top: 15px; position: relative; float: left; width: 180px">
<div class="footerlinkdiv">
<asp:LinkButton ID="LinkButton11" runat="server" CssClass="footerlink" Text="Go To Authorize Canada Partners" Style="text-align: start"></asp:LinkButton>
</div>
</div>
<div class="footerseprator">
</div>
</div>
<div style="float: left">
<div style="float: left; padding-left: 20px">
<asp:ImageButton ID="ImageButton10" runat="server" ImageUrl="~/Images/Go_to_icon.png" CssClass="footerimage" />
</div>
<div style="top: 15px; position: relative; float: left; width: 180px">
<div class="footerlinkdiv">
<asp:LinkButton ID="LinkButton13" runat="server" CssClass="footerlink" Text="Go To Authorize Distributor Page" Style="text-align: start"></asp:LinkButton>
</div>
</div>
</div>
</div>
</div>
tried a lot.. Could some one plz help me with css of the same for below ribbon
You will not be able to resize the text without a jquery library or css media queries. But you can resize the images by giving it some value for height or width like so:
.bannerimage {
max-width: 100%;
height: auto;
width: 10%;
overflow:hidden;
}
Based on this answer StackOverflow #Nikita Rybak I have created a set of labels and textboxes following his solution which shows to be working on JSFiddle.
I have copied this and added a few more categories to my ASP project but when loaded into chrome the boxes and text are all out of align.
This is my html file
<div id="User">
<div>
<div class="left">
<asp:Label ID="lbl_UserName" runat="server" Text="User Name"></asp:Label>
</div>
<div class="right">
<asp:TextBox ID="txtbx_UserName" runat="server"></asp:TextBox>
<br />
</div>
</div>
<div>
<div class="left">
<asp:Label ID="lbl_FirstName" runat="server" Text="First Name"></asp:Label>
</div>
<div class="right">
<asp:TextBox ID="txtbx_FirstName" runat="server"></asp:TextBox>
</div>
</div>
<div>
<div class="left">
<asp:Label ID="lbl_Password" runat="server" Text="Password"></asp:Label>
</div>
<div class="right">
<asp:TextBox ID="txtbx_Password" runat="server"></asp:TextBox>
</div>
</div>
<div>
<div class="left">
<asp:Label ID="lbl_ConfPassword" runat="server" Text="Confirm Password"></asp:Label>
</div>
<div class="right">
<asp:TextBox ID="txtbx_ConfPassword" runat="server"></asp:TextBox>
</div>
</div>
</div>
and my CSS file
#Content
{
position: relative;
float:none;
border: 1px solid #000000;
float: left;
padding: 80px 40px 60px 40px;
text-align:center;
background-color: #F8F8F8;
left: 0px; right: 0px;
text-align: center;
}
#User .left {
width: 30%;
float: left;
text-align: right;}
#User .right {
width: 65%;
margin-left: 10px;
float:left;}
Is there a reason why mine does not work?
It should work okay, though you have a few too many divs in there unnecessarily, and you also have a line break that may be screwing things up. Check out this fiddle
HTML
<div id="User">
<div class="left">
<label>User name</label>
</div>
<div class="right">
<input type="text" />
</div>
<div class="left">
<label>First name</label>
</div>
<div class="right">
<input type="text" />
</div>
<div class="left">
<label>Password</label>
</div>
<div class="right">
<input type="text" />
</div>
<div class="left">
<label>Confirm password</label>
</div>
<div class="right">
<input type="text" />
</div>
</div>
CSS
#User .left {
width: 30%;
float: left;
text-align: right;}
#User .right {
width: 65%;
margin-left: 10px;
float:left;}
Also, you have a #Content element defined in your CSS nut it is not in the HTML, so that could be causing the problem.
EDIT
The only other thing I can think of is that the label control wraps the text in a - maybe try a literal control? The fiddle works fine, so it must be something with webforms controls.
Float sHould be used very carefully. Instead yo can use position attribute to position your div's accordingly.
I am working on website and designing a master page gave some fixed pixels to table layout but getting issues while seeing that page on 1600 X 900 pixels. Then trying into percentage stuff.
create a table and divide that table into columns and gave 40% to first and last column (to st background) because i want my main content table into middle of the screen and gave hardcoded 970px but still getting issues with layout stuff. Last column looks 60% of total screen.
can we set column width dynamically depends on screen resolution ? or some specific solution please suggest..
Hope this is what you are looking for
<body>
<form id="form1" runat="server">
<div style="background-color: Black; width: 100%; height: 680px;">
<div style="width: 970px; margin: 0 auto;padding:0px">
<div style="width: 25%; height: 675px; float: left; background-color: Blue;">
</div>
<div style="width: 75%; height: 675px; float: right; background-color: white">
<div style="width: 75%; height: 675px; float: left; background-color: red">
</div>
<div style="width: 25%; height: 675px; float: right; background-color: Green">
</div>
</div>
</div>
</div>
</form>
Hope it helps
Media queries could solve your problem, take a look at this:
CSS3 Media Queries
You can use different CSS depending on the screen resolution, hope it helps.
With tables
<body>
<form id="form1" runat="server">
<div style="background-color: Black; width: 100%; height: 680px;">
<div style="width: 970px; margin:0 auto;padding:0px">
<table width="100%" style="margin:0px" cellpadding="0" cellspacing="0">
<colgroup width="100%">
<col width="25%" />
<col width="50%" />
<col width="25%" />
</colgroup>
<tr>
<td style="height:680px; background-color:Aqua">
</td>
<td style="height:680px; background-color:Green">
</td>
<td style="height:680px; background-color:Maroon">
</td>
</tr>
</table>
</div>
</div>
</form>