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>
Related
Hi I have been trying to get 2 div boxes next to each other where left box is set max-width:350 the div next to that take up variable width. I have managed that with the display-flex. Problem I am trying to solve is that I want to have the 2nd div drop below the first when the screen size is reduced. Eg for mobile screen width
<div style="display:flex;">
<div style="max-width:350px; float:left; height:auto; background:gray; margin:10px; text-align:center;">
<img src="Ss0Bba.jpg" style="width:350px" alt="" /></div>
<div style="float:left; margin:20px">All of my page contents are in here </div>
</div>
Thanks for any help
Is this something that you are looking for?
<div style="display:flex; justify-content: center; align-items: center; flex-wrap: wrap;">
<div style="max-width:350px; height:auto; margin:10px;">
<img src="https://cdn.pixabay.com/photo/2019/07/25/16/29/background-image-4363006_960_720.png" style="width:350px" alt="" /></div>
<div style="flex: 0 50%; margin:20px">All of my page contents are in here
All of my page contents are in here
All of my page contents are in here
All of my page contents are in here
All of my page contents are in here
All of my page contents are in here
All of my page contents are in here
All of my page contents are in here
</div>
</div>
I removed some CSS and added align-items: center; flex-wrap: wrap; to wrap the content and also center the content nicely.
you need to add flex-wrap: wrap; to the parent element
and add a min-width to your second
<div style="display:flex; flex-wrap: wrap;">
<div style="max-width:350px; float:left; height:auto; background:gray; margin:10px; text-align:center;">
<img src="https://images.template.net/wp-content/uploads/2016/04/30093540/Wave-Background1.jpeg" style="width:350px" alt="" /></div>
<div style="float:left; margin:20px; min-width: 300px">All of my page contents are in here </div>
</div>
<div style="display: block; width:100%; height:100%;">
<div style="max-width:350px; float:left; height:auto; background:gray; margin:10px; text-align:center;">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" style="width:350px" alt="" /></div>
<div style="margin:20px;"><p >All of my page contents are in here </p></div>
</div>
<div style="display: block; width:100%; height:100%;">
<div style="max-width:350px; float:left; height:auto; background:gray; margin:10px; text-align:center;">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" style="width:350px" alt="" /></div>
<div style="margin:20px;float:left;"><p >All of my page contents are in here </p></div>
</div>
I have the following markup which uses bootstrap 4:-
<div class="container">
<div class="row ">
<div class="col-xl-12">
<img src="~/img/img1.png" style="height:60.3px;width:750px" class="mx-auto d-none d-sm-block" />
<p style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">...</p>
<p style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">...</p>
<img src="~/img/img2.png" class="mx-auto d-block" />
<p style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">...</p>
<p style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">...</p>
</div>
</div>
</div>
Currently i got this layout:-
where the images are centered while the text is left aligned, so how i can force the text to have the same vertical alignment as the images?
Try this, but edit classes or whatever to make it work on your site:
<div class="container" style="position:relative; display:inline-block;">
<img class="mx-auto d-none d-sm-block" style="display:block; height:60.3px;width:750px" src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/close-up-of-tulips-blooming-in-field-royalty-free-image-1584131603.jpg">
<div class="text-box" style="position:relative; height:100%; text-align: center; display:flex; justify-content: center; align-items: flex-start; width: 100%;">
<p class="centeredTxt" style="display: block; color: #333;">Text is centered under image</p>
</div>
<div class="text-box" style="position:relative; height:100%; text-align: center; display:flex; justify-content: center; align-items: flex-start; width: 100%;">
<p class="centeredTxt" style="display: block; color: #333;">Text is centered under image 2</p>
</div>
</div>
Difficult to understand how this would work in your code as I don't have the complete code, but I edited my answer to better suit your request.
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 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.