.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>我正在尋找一種解決方案，讓孩子應(yīng)該將自己對齊到中心。所以我可以創(chuàng)建一個類名，以便left, right, and center跨域使用。
3 回答
米脂
TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超3個贊
這里發(fā)生的是自動網(wǎng)格放置。從技術(shù)上講，該項(xiàng)目與您創(chuàng)建的第一列內(nèi)的中心對齊。問題是它一直在左邊，因?yàn)槟鞘悄愕牡谝涣袑?shí)際上所在的位置。
如果您想繼續(xù)使用 CSS 網(wǎng)格來實(shí)現(xiàn)此布局概念，可以通過多種方法來解決此問題。但 12 列網(wǎng)格的問題是，如果沒有一些偏移或變換，就不會有“中心”。
如果您確實(shí)只需要一排有 3 個可能的位置，我建議您使用以下內(nèi)容。它是一個 13 列網(wǎng)格，具有單行的定義高度，這確保了如果項(xiàng)目被無序地洗牌（如果像我的示例一樣 left 是第二個），它們不會跳轉(zhuǎn)到第二個隱含行。
.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 屬性并將內(nèi)容調(diào)整為空格來降低一些復(fù)雜性并獲得更好的響應(yīng)能力。
.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>
函數(shù)式編程
TA貢獻(xiàn)1807條經(jīng)驗(yàn) 獲得超9個贊
這是一個優(yōu)化版本，具有靈活的值，可以與任意數(shù)量的列一起使用。
我會考慮 CSS 變量來輕松調(diào)整模板和中心元素。對于左邊和右邊我們只需要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貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超4個贊
.parent {
border: 1px solid red;
display: grid;
grid-template-columns: repeat(1, 1fr);
}
- 3 回答
- 0 關(guān)注
- 185 瀏覽
添加回答
舉報
0/150
提交
取消