html - 垂直对齐div中的多个文本框

Question

我有多对标签和文本框，我想让标签在它们所在的位置并垂直对齐所有文本框。如果可能的话，我不想使用表格。这是我的代码:

 <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>

请注意，我已经为 div 准备了这个 css:

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

    }

Answer 1

使用flex垂直对齐

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