我試圖將行內(nèi)的列居中，但它們不會居中。我已經(jīng)嘗試多次更改代碼，但似乎找不到錯(cuò)誤。已經(jīng)在“服務(wù)”和“第 3 節(jié)”課程中嘗試過justify-content:center，align-items:center但沒有成功。我也無法將頂行的“我做什么”文本居中?，F(xiàn)在的樣子：https://i.stack.imgur.com/WGplQ.png <div class="what-i-do"> <h3>WHAT I DO</h3> </div> <div class="row services"> <div class="column"> <div class="first-column"> <h3 class="services-title"> Content <br /> Creation </h3> <div class="services-text"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu. </div> </div> </div> <div class="column"> <div class="second-column"> <h3 class="services-title"> Strategy <br /> Session </h3> <div class="services-text"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu. </div> </div> </div>
3 回答
慕無忌1623718
TA貢獻(xiàn)1744條經(jīng)驗(yàn) 獲得超4個(gè)贊
在行服務(wù){(diào)顯示：flex; justify-content（也嘗試項(xiàng)目）：center;}
很難說一切都去哪里了，但嘗試一下。
米脂
TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超3個(gè)贊
我在任何地方都沒有看到display: flex規(guī)則。從這里開始，然后刪除列寬，因?yàn)樗鼈冞`背了彈性布局的目的。
.row {
display: flex;
}
.column {
padding: 0 20px;
}
.services {
align-items: center;
justify-content: center;
}
.services-title {
font-family: "Ibarra Real Nova", serif;
align-items: center;
color: rgba(40, 44, 48, 1);
font-weight: bold;
text-align: center;
font-size: 45px;
}
.services-text {
font-family: "Lato", sans-serif;
text-align: justify;
line-height: 1.8;
letter-spacing: 0em;
font-size: 16px;
font-weight: 300;
}
<div class="row services">
<div class="column">
<div class="first-column">
<h3 class="services-title">
Content <br />
Creation
</h3>
<div class="services-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque
eu.
</div>
</div>
</div>
<div class="column">
<div class="second-column">
<h3 class="services-title">
Strategy <br />
Session
</h3>
<div class="services-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque
eu.
</div>
</div>
</div>
<div class="column">
<div class="third-column">
<h3 class="services-title">Branding</h3>
<div class="services-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque
eu.
</div>
</div>
</div>
</div>
滄海一幻覺
TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超5個(gè)贊
和align-items:center都justify-items:center在 CSS 網(wǎng)格中工作。您的問題可能與其他 CSS 影響網(wǎng)格的高度/寬度或樣式規(guī)則display:grid本身的位置有關(guān)：
html, body{height: 100%}
.grid{
height: 60%;
display: grid;
grid-template-columns: 1fr 1fr;
background-color: salmon;
align-items: center;
justify-items: center;
}
<div class="grid">
<div>Lorem ipsum</div>
<div>Lorem ipsum lorem ipsum</div>
</div>
- 3 回答
- 0 關(guān)注
- 184 瀏覽
添加回答
舉報(bào)
0/150
提交
取消