Control not getting centered
-
I am new to Web Design. I have a set of div tags as shown below. My problem is the asp.net login control is not displayed at the center of the division. What should I do inorder to make it centered. The ASp.net design view displays the login control centered in the div but when I run the page in a browser it aligns to left. What to do? Here is the markup
I am the header
for center DIV You must use Abosolute position instead of relative position in your case .Panel1 { position:absolute; width:125px; height:50px; left:50%; top:50%; margin-left:-62.5px; margin-top:25px; } and use this class
-
for center DIV You must use Abosolute position instead of relative position in your case .Panel1 { position:absolute; width:125px; height:50px; left:50%; top:50%; margin-left:-62.5px; margin-top:25px; } and use this class
-
Be cautious when using absolute positioning. It is outside the normal flow of the document.
Can you please explain your point?
-
Can you please explain your point?
I did not say "don't use", but be cautious when using absolute positioning. Note : I did not criticize the css code you posted. You can read here of the different types of positioning http://reference.sitepoint.com/css/positioning[^] [added]I understand there is a video available here that uses MS Expressions Web to explain positioning http://www.learnexpression.com/Videos/EW-08/Positioning/Positioning.html[^][/added]
modified on Tuesday, August 3, 2010 6:28 AM
-
I did not say "don't use", but be cautious when using absolute positioning. Note : I did not criticize the css code you posted. You can read here of the different types of positioning http://reference.sitepoint.com/css/positioning[^] [added]I understand there is a video available here that uses MS Expressions Web to explain positioning http://www.learnexpression.com/Videos/EW-08/Positioning/Positioning.html[^][/added]
modified on Tuesday, August 3, 2010 6:28 AM
I am not using absolute position frequently, but in Gjm's case I used this position for center div in the page, If you know other that this solution then please post it
-
I did not say "don't use", but be cautious when using absolute positioning. Note : I did not criticize the css code you posted. You can read here of the different types of positioning http://reference.sitepoint.com/css/positioning[^] [added]I understand there is a video available here that uses MS Expressions Web to explain positioning http://www.learnexpression.com/Videos/EW-08/Positioning/Positioning.html[^][/added]
modified on Tuesday, August 3, 2010 6:28 AM
-
I am not using absolute position frequently, but in Gjm's case I used this position for center div in the page, If you know other that this solution then please post it
If the code you and Gjm then uses works, then that is all that matters. Other ways to centre a div include
margin-right : autoandmargin-left : autowhen using the CSS box model. As I said above, I'm not criticizing the code you used. Shall we leave it at that ??? -
If the code you and Gjm then uses works, then that is all that matters. Other ways to centre a div include
margin-right : autoandmargin-left : autowhen using the CSS box model. As I said above, I'm not criticizing the code you used. Shall we leave it at that ???My friend, margin-right : auto and margin-left : auto is working but only on on horizontal center not vertical center on the page , if you want both side center (center on the page on any resolution) then this css rule is useless, You can try it and get result
-
I am new to Web Design. I have a set of div tags as shown below. My problem is the asp.net login control is not displayed at the center of the division. What should I do inorder to make it centered. The ASp.net design view displays the login control centered in the div but when I run the page in a browser it aligns to left. What to do? Here is the markup
I am the header
Try this
<div id="hd" style="display:table;vertical-align:middle;position: relative; text-align: center; background-color: gray; width: 100%; height: 500px; top: 0px; left: 0px;">
<div id="c" style="display:table-cell;vertical-align:middle;text-align:center;position:relative;top:225px;">
<div style="width:125px;height:50px;">
<asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
<asp:Login ID="Login1" runat="server" Style="position: relative">
</asp:Login>
</asp:Panel> I am the header
</div></div></div>
-
Try this
<div id="hd" style="display:table;vertical-align:middle;position: relative; text-align: center; background-color: gray; width: 100%; height: 500px; top: 0px; left: 0px;">
<div id="c" style="display:table-cell;vertical-align:middle;text-align:center;position:relative;top:225px;">
<div style="width:125px;height:50px;">
<asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
<asp:Login ID="Login1" runat="server" Style="position: relative">
</asp:Login>
</asp:Panel> I am the header
</div></div></div>
My friend, you made the fatal mistake of thinking all browsers are fairly standards-compliant. :(