我試圖將行內的列居中，但它們不會居中。我已經嘗試多次更改代碼，但似乎找不到錯誤。已經在“服務”和“第 3 節”課程中嘗試過justify-content:center，align-items:center但沒有成功。我也無法將頂行的“我做什么”文本居中。現在的樣子：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 回答
米脂
TA貢獻1836條經驗 獲得超3個贊
我在任何地方都沒有看到display: flex規則。從這里開始，然后刪除列寬，因為它們違背了彈性布局的目的。
.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貢獻1824條經驗 獲得超5個贊
和align-items:center都justify-items:center在 CSS 網格中工作。您的問題可能與其他 CSS 影響網格的高度/寬度或樣式規則display:grid本身的位置有關：
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 關注
- 163 瀏覽
添加回答
舉報
0/150
提交
取消