我有一個容器，我想將行類中的所有內容居中對齊，但是當我提供 justify-content-center 時，它對我的?? div 沒有任何影響，justify-content 是否適用于行？
<div class="container my-5">
<div class="row justify-content-center">
<hr class="col-4 border-2 border-top border-danger">
<p class="col-4" >Skills and Abilities</p>
<hr class="col-4 border-2 border-top border-danger">
</div>
</div>
任何幫助將非常感激。
uj5u.com熱心網友回復：
嘗試這個
<div class="container row my-5">
<div class="d-flex justify-content-center">
<hr class="col-4 border-2 border-top border-danger" />
<p class="col-4" >Skills and Abilities</p>
<hr class="col-4 border-2 border-top border-danger" />
</div>
</div>
如果仍然不行嘗試改變
<hr class="col-4 border-2 border-top border-danger" />
至
<div class="col-4 border-2 border-top border-danger" />
uj5u.com熱心網友回復：
理想情況下，您應該使用 hr 標簽的 div 標簽。但根據您的代碼，只需在 p 標簽中添加 text-center 類。
<div class="container my-5">
<div class="row jusitfy-content-center">
<hr class="col-4 border-2 mt-2 border-top border-danger" />
<p class="col-4 text-center">Skills and Abilities</p>
<hr class="col-4 border-2 mt-2 border-top border-danger" />
</div>
</div>
這是最終輸出
如果你想達到上述結果。那么不推薦你的方法，你可以試試這個：
<div class="position-relative">
<hr class="border border-danger" />
<p class="position-absolute top-50 start-50 translate-middle bg-white fw-bold
text-black-50 px-4">
Skills and Abilities
</p>
</div>
uj5u.com熱心網友回復：
為此，您可以使用 Flexbox 或 CSS Grid。它比在文本后面添加彩色框更靈活。
這是HTML：
<h2>Title</h2>
<h2>Title number two</h2>
<h2>Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</h2>
/* Sample CSS */
body {
background: linear-gradient(#A0BAF7, #4CACC1);
min-height: 100vh;
}
h2 {
margin: 30px 0;
font: 700 2em/1.4 'Avenir', sans-serif;
color: #FFF;
}
這是 Flexbox 解決方案：https ://codepen.io/trys/pen/vjRXLW/
h2 {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
text-align: center;
}
h2:before,
h2:after {
content: '';
border-top: 2px solid;
margin: 0 20px 0 0;
flex: 1 0 20px;
}
h2:after {
margin: 0 0 0 20px;
}
這里是 CSS Grid 解決方案：https ://codepen.io/trys/pen/vjRzPa
h2 {
display: grid;
width: 100%;
align-items: center;
text-align: center;
grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
grid-gap: 20px;
}
h2:before,
h2:after {
content: '';
border-top: 2px solid;
}
uj5u.com熱心網友回復：
只需添加d-flex到您的容器中
鏈接 Flex Boostrap：https ://getbootstrap.com/docs/4.0/utilities/flex/
<div class="container my-5">
<div class="row d-flex justify-content-center">
<hr class="col-4 border-2 border-top border-danger">
<p class="col-4" >Skills and Abilities</p>
<hr class="col-4 border-2 border-top border-danger">
</div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/496893.html