我正在嘗試將 3 個 div 定位在另一個 div 的中心，但我遇到了定位問題。我嘗試使用垂直對齊和負邊距，但似乎沒有任何效果。
.float-container {
border: 3px solid red;
padding: 250px;
position: relative;
background-color: lightblue;
}
.float-child {
width: 150px;
height: 150px;
float: left;
padding: 10px;
border: 2px solid red;
margin: 30px;
vertical-align: middle;
}<div class="float-container">
<div class="float-child">
<div>Float Column 1</div>
</div>
<div class="float-child">
<div>Float Column 2</div>
</div>
<div class="float-child">
<div>Float Column 3</div>
</div>
</div>uj5u.com熱心網友回復：
一種簡單而現代的方法是使用Flexbox，如下所示：
.float-container {
border: 3px solid red;
padding: 20px;
background-color: lightblue;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
.float-child {
width: 150px;
height: 150px;
padding: 10px;
border: 2px solid red;
}<div class="float-container">
<div class="float-child">
Float Column 1
</div>
<div class="float-child">
Float Column 2
</div>
<div class="float-child">
Float Column 3
</div>
</div>uj5u.com熱心網友回復：
我的評論示例
垂直對齊不適用于浮動元素。如今，對于這種布局，grid 或 flex 是高效、靈活且易于實施的。這不是浮動作業；）
.float-container {
border: 3px solid red;
display:flex;
align-items:center;
justify-content:center;
gap:30px;
min-height:500px;
position: relative;
background-color: lightblue;
}
.float-child {
width: 150px;
height: 150px;
padding: 10px;
border: 2px solid red;
}<div class="float-container">
<div class="float-child">
<div>Float Column 1</div>
</div>
<div class="float-child">
<div>Float Column 2</div>
</div>
<div class="float-child">
<div>Float Column 3</div>
</div>
</div>孩子們現在只需要調整大小。它們之間的對齊間隙是從 flex 父級設定的。給出了一個最小高度（500px 從你的 padding 250px 中得到啟發）
uj5u.com熱心網友回復：
洗掉float: left;and 在其位置添加display: flex;, justify-content: center;, align-items: center;, flex-direction: row;。對于這樣的需求，flex 和 grid 通常更容易實作。
uj5u.com熱心網友回復：
.float-container {
border: 3px solid red;
padding: 20px;
background-color: lightblue;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
.float-child {
width: 150px;
height: 150px;
padding: 10px;
border: 2px solid red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="float-container">
<div class="float-child">
<div>Float Column 1</div>
</div>
<div class="float-child">
<div>Float Column 2</div>
</div>
<div class="float-child">
<div>Float Column 3</div>
</div>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/438217.html