html - 输入和按钮在子 div 内保持居中

Question

我有一个父 div，里面有 3 个子 div。我需要每个子 div 占据屏幕的三分之一，并且每个 div 内的所有元素（文本、按钮和输入）都通过始终位于子 div 的中心来响应。

我可以使每个子 div 占据屏幕的三分之一，但元素没有响应，并且在子 div 内的两列中潜水，如下图所示：

这是使用的代码：

input,
select,
textarea {
  width: 100%;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

.Order_Create_Ship_Stock>div {
  width: 30%;
  margin: 5px;
  padding: auto;
  display: inline-table;
  border: solid;
}

.Order_Create,
.Order_Ship,
.Order_Store {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
  display: table-cell;
}

#SubmitCreateOrder,
#SubmitShipOrder,
#SubmitStoreOrder {
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

<div id="OrderCreateShipStock" class="Order_Create_Ship_Stock">
  <div id="OrderCreate" class="Order_Create">
    <form onsubmit="App.createOrder(); return false">
      <label for="BarcodeInput">
                        <span>Barcode</span>
                        <input name="BarcodeInput"id="Barcode" class="Barcorde" type="text" placeholder="Order's Barcode...">
                    </label>
      <label for="OwnerInput">
                        <span>Owner</span>
                        <input name="OwnerInput" id="Owner" class="Owner" type="text" placeholder="Owner of the product...">
                    </label>
      <label for="ProductListInput">
                        <span>Product list</span>
                        <input name="ProductListInput" id="ProductList" class="Product_List" type="text" placeholder="Product list of the order....">
                    </label>
      <label for="ExpirationDateInput">
                        <span>Expiration date</span>
                        <input name="ExpirationDateInput" id="ExpirationDate" class="Expiration_Date" type="date">
                    </label>
      <label for="TemperatureMinimalInput">
                        <span>Temperature minimal</span>
                        <input name="TemperatureMinimalInput" id="TemperatureMinimal" class="Temperature_Minimal" type="number" placeholder="Minimal temperature of order's environment...">
                    </label>
      <label for="TemperatureMaximalInput">
                        <span>Temperature maximal</span>
                        <input name="TemperatureMaximalInput" id="TemperatureMaximal" class="Temperature_Maximal" type="number" placeholder="Maximal temperature of order's environment...">
                    </label>
      <label for="IOTDeviceInput">
                        <span>IOT Device</span>
                        <select name="IOTDeviceInput" id="IOTDevice" class="IOT_Device">
                            <option value="">---Please select an IOT Device---</option>
                        </select>
                    </label>
      <label for="FinalDestinationInput">
                        <span>Final destination</span>
                        <input name="FinalDestinationInput" id="FinalDestination" class="Final_Destination" type="text" placeholder="Order's final destination...">
                    </label>
      <button id="SubmitCreateOrder" class="Submit_Create_Order" type="submit">Create Order</button>
    </form>
  </div>
  <div id="OrderShip" class="Order_Ship">
    <form onsubmit="App.ShipOrder(); return false">
      <label for="OrderIDInput">
                        <span>OrderID</span>
                        <input name="OrderIDInput" id="OrderID" class="Order_ID" type="text" placeholder="Order's ID">
                    </label>
      <label for="ActualLocationInput">
                        <span>Actual location</span>
                        <input name="ActualLocationInput" id="ActualLocation" class="Actual_Location_Input" type="text" placeholder="Order's actual location">
                    </label>
      <label for="ActualTemperatureInput">
                        <span>Actual temperature</span>
                        <input name="ActualTemperatureInput" id="ActualTemperature" class="Actual_Temperature" type="text" placeholder="Order's actual environment temperature">
                    </label>
      <label for="CurrentCounterpartyInput">
                        <span>Counterparty</span>
                        <input name="CurrentCounterpartyInput" id="CurrentCounterparty" class="Current_Counterparty" type="text" placeholder="Order's current counterparty">
                    </label>
      <label for="IOTDeviceInput">
                        <span>IOT Device</span>
                        <select name="IOTDeviceInput" id="IOTDevice" class="IOT_Device_Input">
                        </select>
                    </label>
      <label for="AnticipatedDateInput">
                        <span>Anticipated date</span>
                        <input name="AnticipatedDateInput" id="AnticipatedDate" class="Anticipated_Date" type="date">
                    </label>
      <label for="DestinationInput">
                        <span>Destination</span>
                        <input name="DestinationInput" id="Destination" class="Destination_" type="text" placeholder="Order's destination">
                    </label>
      <button id="SubmitShipOrder" class="Submit_Ship_Order" type="submit">Ship Order</button>
    </form>
  </div>
  <div id="OrderStore" class="Order_Store">
    <form onsubmit="App.storeOrder(); return false">
      <label for="OrderIDInput">
                        <span>OrderID</span>
                        <input name="OrderIDInput" id="OrderID" class="Order_ID" type="text" placeholder="Order's ID">
                    </label>
      <label for="ActualLocationInput">
                        <span>Actual location</span>
                        <input name="ActualLocationInput" id="ActualLocation" class="Actual_Location_Input" type="text" placeholder="Order's actual location">
                    </label>
      <label for="ActualTemperatureInput">
                        <span>Actual temperature</span>
                        <input name="ActualTemperatureInput" id="ActualTemperature" class="Actual_Temperature" type="text" placeholder="Order's actual environment temperature">
                    </label>
      <label for="CurrentCounterpartyInput">
                        <span>Counterparty</span>
                        <input name="CurrentCounterpartyInput" id="CurrentCounterparty" class="Current_Counterparty" type="text" placeholder="Order's current counterparty">
                    </label>
      <label for="IOTDeviceInput">
                        <span>IOT Device</span>
                        <select name="IOTDeviceInput" id="IOTDevice" class="IOT_Device_Input">
                            <option value="">---Please select an IOT Device---</option>
                        </select>
                    </label>
      <button id="SubmitStoreOrder" class="Submit_Store_Order" type="submit">Store Order</button>
    </form>
  </div>
</div>

当我工作时，我可以通过使用 flexbox（flex-direction: column）以某种方式使按钮保留在一列中，但是这种方法不适用于输入和文本区域......

因此，我想请求一些帮助，以使这些子 div 中的所有元素仅保留在一列中。

我提前感谢任何愿意花时间帮助我的人。

标签： htmlcssflexbox

Answer 1

对于按钮，添加 margin: auto, centered 任何孩子都可以完成这项工作，如果您发现将其设置为完整按钮有用，我会为第一个按钮添加一个选项。

此外，为了让容器响应，您可以将父级设置为弹性框。然后使用 flex: 1 设置所有子项并使用媒体查询使其成为列。

/* --- FOR THE CONTAINERS --- */

#OrderCreateShipStock {
    display: flex;
}
.Order_Create_Ship_Stock>div {
    margin: 5px;
    border: solid;
    flex: 1;
}
@media only screen and (max-width: 800px) {
#OrderCreateShipStock {
    flex-wrap: wrap;
    flex-direction: column;
}
}


/* --- BUTTON CENTERED --- */

#SubmitCreateOrder, #SubmitShipOrder, #SubmitStoreOrder {
    display: flex;
    margin: auto;
}

/* --- BUTTON FULL CENTERED TEXT --- */ 

#SubmitCreateOrder, #SubmitShipOrder, #SubmitStoreOrder {
    width: 100%;
    justify-content: center;
    align-items: center;
    
}

input,
select,
textarea {
  width: 100%;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

#OrderCreateShipStock {
    display: flex;
}
.Order_Create_Ship_Stock>div {
  margin: 5px;
  border: solid;
  flex: 1;
}

.Order_Create,
.Order_Ship,
.Order_Store {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
  display: table-cell;
}

#SubmitCreateOrder,
#SubmitShipOrder,
#SubmitStoreOrder {
  display: flex;
  margin: auto;
}
#SubmitCreateOrder {
    width: 100%;
    justify-content: center;
    align-items: center;
    
}
@media only screen and (max-width: 500px) {
#OrderCreateShipStock {
    flex-wrap: wrap;
    flex-direction: column;
}
}

<div id="OrderCreateShipStock" class="Order_Create_Ship_Stock">
  <div id="OrderCreate" class="Order_Create">
    <form onsubmit="App.createOrder(); return false">
      <label for="BarcodeInput">
                        <span>Barcode</span>
                        <input name="BarcodeInput"id="Barcode" class="Barcorde" type="text" placeholder="Order's Barcode...">
                    </label>
      <label for="OwnerInput">
                        <span>Owner</span>
                        <input name="OwnerInput" id="Owner" class="Owner" type="text" placeholder="Owner of the product...">
                    </label>
      <label for="ProductListInput">
                        <span>Product list</span>
                        <input name="ProductListInput" id="ProductList" class="Product_List" type="text" placeholder="Product list of the order....">
                    </label>
      <label for="ExpirationDateInput">
                        <span>Expiration date</span>
                        <input name="ExpirationDateInput" id="ExpirationDate" class="Expiration_Date" type="date">
                    </label>
      <label for="TemperatureMinimalInput">
                        <span>Temperature minimal</span>
                        <input name="TemperatureMinimalInput" id="TemperatureMinimal" class="Temperature_Minimal" type="number" placeholder="Minimal temperature of order's environment...">
                    </label>
      <label for="TemperatureMaximalInput">
                        <span>Temperature maximal</span>
                        <input name="TemperatureMaximalInput" id="TemperatureMaximal" class="Temperature_Maximal" type="number" placeholder="Maximal temperature of order's environment...">
                    </label>
      <label for="IOTDeviceInput">
                        <span>IOT Device</span>
                        <select name="IOTDeviceInput" id="IOTDevice" class="IOT_Device">
                            <option value="">---Please select an IOT Device---</option>
                        </select>
                    </label>
      <label for="FinalDestinationInput">
                        <span>Final destination</span>
                        <input name="FinalDestinationInput" id="FinalDestination" class="Final_Destination" type="text" placeholder="Order's final destination...">
                    </label>
      <button id="SubmitCreateOrder" class="Submit_Create_Order" type="submit">Create Order</button>
    </form>
  </div>
  <div id="OrderShip" class="Order_Ship">
    <form onsubmit="App.ShipOrder(); return false">
      <label for="OrderIDInput">
                        <span>OrderID</span>
                        <input name="OrderIDInput" id="OrderID" class="Order_ID" type="text" placeholder="Order's ID">
                    </label>
      <label for="ActualLocationInput">
                        <span>Actual location</span>
                        <input name="ActualLocationInput" id="ActualLocation" class="Actual_Location_Input" type="text" placeholder="Order's actual location">
                    </label>
      <label for="ActualTemperatureInput">
                        <span>Actual temperature</span>
                        <input name="ActualTemperatureInput" id="ActualTemperature" class="Actual_Temperature" type="text" placeholder="Order's actual environment temperature">
                    </label>
      <label for="CurrentCounterpartyInput">
                        <span>Counterparty</span>
                        <input name="CurrentCounterpartyInput" id="CurrentCounterparty" class="Current_Counterparty" type="text" placeholder="Order's current counterparty">
                    </label>
      <label for="IOTDeviceInput">
                        <span>IOT Device</span>
                        <select name="IOTDeviceInput" id="IOTDevice" class="IOT_Device_Input">
                        </select>
                    </label>
      <label for="AnticipatedDateInput">
                        <span>Anticipated date</span>
                        <input name="AnticipatedDateInput" id="AnticipatedDate" class="Anticipated_Date" type="date">
                    </label>
      <label for="DestinationInput">
                        <span>Destination</span>
                        <input name="DestinationInput" id="Destination" class="Destination_" type="text" placeholder="Order's destination">
                    </label>
      <button id="SubmitShipOrder" class="Submit_Ship_Order" type="submit">Ship Order</button>
    </form>
  </div>
  <div id="OrderStore" class="Order_Store">
    <form onsubmit="App.storeOrder(); return false">
      <label for="OrderIDInput">
                        <span>OrderID</span>
                        <input name="OrderIDInput" id="OrderID" class="Order_ID" type="text" placeholder="Order's ID">
                    </label>
      <label for="ActualLocationInput">
                        <span>Actual location</span>
                        <input name="ActualLocationInput" id="ActualLocation" class="Actual_Location_Input" type="text" placeholder="Order's actual location">
                    </label>
      <label for="ActualTemperatureInput">
                        <span>Actual temperature</span>
                        <input name="ActualTemperatureInput" id="ActualTemperature" class="Actual_Temperature" type="text" placeholder="Order's actual environment temperature">
                    </label>
      <label for="CurrentCounterpartyInput">
                        <span>Counterparty</span>
                        <input name="CurrentCounterpartyInput" id="CurrentCounterparty" class="Current_Counterparty" type="text" placeholder="Order's current counterparty">
                    </label>
      <label for="IOTDeviceInput">
                        <span>IOT Device</span>
                        <select name="IOTDeviceInput" id="IOTDevice" class="IOT_Device_Input">
                            <option value="">---Please select an IOT Device---</option>
                        </select>
                    </label>
      <button id="SubmitStoreOrder" class="Submit_Store_Order" type="submit">Store Order</button>
    </form>
  </div>
</div>