.parent{ border:1px solid red; display:grid; grid-template-columns: repeat(12, 1fr);}.child{ background:green; align-self:center;}<div class="parent"> <div class="child" style="justify-self: center;"> I am child </div></div>我正在尋找一種解決方案，讓孩子應該將自己對齊到中心。所以我可以創建一個類名，以便left, right, and center跨域使用。
3 回答
米脂
TA貢獻1836條經驗 獲得超3個贊
這里發生的是自動網格放置。從技術上講，該項目與您創建的第一列內的中心對齊。問題是它一直在左邊，因為那是你的第一列實際上所在的位置。
如果您想繼續使用 CSS 網格來實現此布局概念，可以通過多種方法來解決此問題。但 12 列網格的問題是，如果沒有一些偏移或變換，就不會有“中心”。
如果您確實只需要一排有 3 個可能的位置，我建議您使用以下內容。它是一個 13 列網格，具有單行的定義高度，這確保了如果項目被無序地洗牌（如果像我的示例一樣 left 是第二個），它們不會跳轉到第二個隱含行。
.parent{
border:1px solid red;
display:grid;
grid-template-columns: repeat(13, 1fr);
grid-template-rows: 60px;
}
.center{
background:green;
grid-column: 7/8;
grid-row: 1/2;
}
.left {
background: red;
grid-column: 1/2;
grid-row: 1/2;
}
.right {
background: blue;
grid-column: 13/14;
grid-row: 1/2;
}
<div class="parent">
<div class="center">
I am child
</div>
<div class="left">
Me too
</div>
<div class="right">
Also me
</div>
</div>
編輯：您還可以使用 Flexbox 并通過使用 order 屬性并將內容調整為空格來降低一些復雜性并獲得更好的響應能力。
.parent {
border: 1px solid red;
display: flex;
justify-content: space-between;
}
.center {
background: green;
order: 2
}
.left {
background: red;
order: 1
}
.right {
background: blue;
order: 3
}
<div class="parent">
<div class="center">
I am child
</div>
<div class="left">
Me too
</div>
<div class="right">
Also me
</div>
</div>
函數式編程
TA貢獻1807條經驗 獲得超9個贊
這是一個優化版本，具有靈活的值，可以與任意數量的列一起使用。
我會考慮 CSS 變量來輕松調整模板和中心元素。對于左邊和右邊我們只需要1和-1
.parent{
--n:6;
display:grid;
grid-template-columns: repeat(calc(2*var(--n)), 1fr);
grid-auto-flow:dense;
margin:5px;
outline:1px solid;
}
.left{
grid-column-start:1;
}
.right{
grid-column-end:-1;
text-align:right;
}
.center {
grid-column:calc(var(--n))/span 2;
text-align:center;
}
.parent > * {
border:1px solid red;
}
<div class="parent">
<div class="left">
left
</div>
<div class="right">
right
</div>
<div class="center">
center
</div>
</div>
<div class="parent" style="--n:3">
<div class="left">
left
</div>
<div class="right">
right
</div>
<div class="center">
center
</div>
</div>
<div class="parent" style="--n:10">
<div class="left">
left
</div>
<div class="right">
right
</div>
<div class="center">
center
</div>
</div>
繁星coding
TA貢獻1797條經驗 獲得超4個贊
.parent {
border: 1px solid red;
display: grid;
grid-template-columns: repeat(1, 1fr);
}
- 3 回答
- 0 關注
- 171 瀏覽
添加回答
舉報
0/150
提交
取消