Plateforme Level Extreme
Abonnement
Profil corporatif
Produits & Services
Support
Légal
English
Center form-group elements
Message
 
 
À
27/02/2015 13:17:02
Information générale
Forum:
CSS
Catégorie:
Autre
Divers
Thread ID:
01615877
Message ID:
01615947
Vues:
16
>>>>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 :-}

I wish I could find a good book and a comprehensive article on understanding different HTML styles. For example, before your suggestion, I tried "text-align: center" in many different variations. And I never thought about "display: block". So I would like read to why "display: block" made the difference here. I will google and see what I find.
"The creative process is nothing but a series of crises." Isaac Bashevis Singer
"My experience is that as soon as people are old enough to know better, they don't know anything at all." Oscar Wilde
"If a nation values anything more than freedom, it will lose its freedom; and the irony of it is that if it is comfort or money that it values more, it will lose that too." W.Somerset Maugham
Précédent
Répondre
Fil
Voir

Click here to load this message in the networking platform