CODEWITHSUNDEEP
htmlcssflexbox
Alexandre
Alexandre

Reputation: 125

Vertical align multiple textboxes in div

I have multiples pairs of label and textbox, and I want to let the labels where they are and vertical align all the textboxes. If possible I would like to not use tables. Here is my code : 

 <div class="form-group col-md-6 well" id="votreStation" style="background-color: #19171c; border-color: #ffcc00; ">
                <br />
                <asp:Label class="label label-danger" runat="server" ID="labelVotreStation"></asp:Label>
                <br>
                <br>
                <asp:Label class="label label-warning" for="exampleTextarea" ID="labelPrixGazoleVotreStation" runat="server"> </asp:Label>
                <asp:TextBox ID="PrixGazoleStationChoisie" runat="server">1.25</asp:TextBox>
                <br>
                <asp:Label class="label label-warning" for="exampleTextarea" ID="labelPrixSP95VotreStation" runat="server"> </asp:Label>
                <asp:TextBox ID="PrixSP95StationChoisie" runat="server">1.4</asp:TextBox>
                <br>
                <asp:Label class="label label-warning" for="exampleTextarea" ID="labelPrixSP98VotreStation" runat="server"></asp:Label>
                <asp:TextBox ID="PrixSP98StationChoisie" runat="server">1.3</asp:TextBox>
                <br>
                <asp:Label class="label label-warning" for="exampleTextarea" ID="labelPrixGPLcVotreStation" runat="server"></asp:Label>
                <asp:TextBox ID="PrixGPLcStationChoisie" runat="server">0.6</asp:TextBox>
                <br>
                <asp:Label class="label label-warning" for="exampleTextarea" ID="labelPrixSP95_E10VotreStation" runat="server"></asp:Label>
                <asp:TextBox ID="PrixE10StationChoisie" runat="server">1.2</asp:TextBox>
                <br>
                <asp:Label class="label label-warning" for="exampleTextarea" ID="labelPrixE85VotreStation" runat="server"></asp:Label>
                <asp:TextBox ID="PrixE85StationChoisie" runat="server">1.3</asp:TextBox>

                <br>
            </div>

Note that I have already this css for the div :

 #votreStation {
        flex: 1; 
        padding: 1em;

    }

Upvotes: 1

Views: 983

Answers (1)

czl
czl

Reputation: 117

use flex to verticle align

#votreStation {
   display:flex
   align-items:center; 
   flex-direction:column;
}

Upvotes: 1

Related Questions