我使用引導程式 5
我希望文本與圖示高度垂直對齊，而不是在圖示下方放置文本
h3 {
text-align: center;
}
.testHead {
background-color: #5c636a;
color: white;
text-align: center;
}
.testHead .col {
font-size: 1.2rem!important;
}
.testHead i {
font-size: 4rem!important;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<nav class="testHead">
<h3>For a few dollar</h3>
<br>
<div class="row">
<div class="col ">
<i class="bi bi-display"></i> Answer simple question
</div>
<div class="col">
<i class="bi bi-download"></i> Download and print
</div>
<div class="col">
<i class="bi bi-clock"></i> It take less then 10 minutes
</div>
</div>
</nav>搜索得到類似的東西
uj5u.com熱心網友回復：
讓你的元素靈活，這是最簡單的解決方案。將這些 Bootstrap 類添加到需要垂直居中的元素中，如下所示：
<nav class="testHead">
<h3>For a few dollar</h3>
<br />
<div class="row">
<div class="col d-flex align-items-center">
<i class="bi bi-display"></i>
Answer simple question
</div>
<div class="col d-flex align-items-center">
<i class="bi bi-download"></i>
Download and print
</div>
<div class="col d-flex align-items-center">
<i class="bi bi-clock"></i>
It take less then 10 minutes
</div>
</div>
</nav>
uj5u.com熱心網友回復：
或使用簡單的 CSS。
用 ap 標簽包圍你的文本，用一個類名來給出 margin-letf
前任 ：
<div class="col d-flex align-items-center">
<i class="bi bi-display"></i>
<p class="descr">Answer simple question</p>
</div>
然后將 css 應用于您的 <div >：
.col {
display:flex;
align-items:center;
}
.col .descr {
margin-left: 10px
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/445178.html
下一篇：如何使用CSS翻轉svg影像