Level Extreme platform
Subscription
Corporate profile
Products & Services
Support
Legal
Français
Center form-group elements
Message
From
27/02/2015 13:17:02
 
General information
Forum:
CSS
Category:
Other
Miscellaneous
Thread ID:
01615877
Message ID:
01615941
Views:
13
>>>Here is the issue I am working on. Obviously using Bootstrap 3 but I think the issue has more to do with the Selector's specificity than simply Bootstrap. But I can't seem to find the solution.
>>>
>>>Case 1.
>>>The ASP.NET form class is set to "form-inline center".
>>>The Head section of the page has the following style:
>>>
>>><style>
>>>   @media only screen and (min-width: 768px) {
>>>        .center { text-align: center; }
>>>    }
>>>
>>>  </style>
>>>
>>>
>>>Then elements of a Div element of class "form-group" are centered on the page. As well as any other element of the page is centered.
>>>
>>>Case 2.
>>>I want to remove the .center class from the "form-inline center" and center only one Div of "form-group"
>>>So I enter a style "text-align" to this particular "form-group" as follows:
>>>
>>>   <div class="form-group" style="text-align: center" >
>>>        <asp:label ID="lblName" class="control-label" runat="server">Enter:</asp:label>
>>>        <asp:textbox id="txtName" Width="150" MaxLength="15" Runat="server" CssClass="form-control"></asp:textbox>
>>>        <asp:Button runat="server" CssClass="btn btn-primary" ID="btnSubmit" Enabled="true" Text="Submit" onclick="btnButton_Click" />
>>>    </div>
>>>
>>>
>>>But the div "form-group" is NOT centered.
>>>
>>>I suspect that this is due to the fact that "specificity" of style defined in the Div is lower that it is in the Bootstrap class "form-inline"
>>>
>>>How do I increase the specificity of the style text-align for this "form-group"?
>>
>>I think you need to override display:
<div class="form-group" style="text-align: center;display:block">
>
>You suggestion to use display: block style solved the problem. Thank you very much!

Good guess I guess :-}
Previous
Next
Reply
Map
View

Click here to load this message in the networking platform