Align tex with heigh of icon-CodePudding

I use bootstrap 5

Instead of having text below icon, I would like text align verticaly with icon heigh

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 >
  <h3>For a few dollar</h3>
  <br>
  <div >
    <div >
      <i ></i> Answer simple question

    </div>
    <div >
      <i ></i> Download and print
    </div>
    <div >
      <i ></i> It take less then 10 minutes
    </div>
  </div>
</nav>

Search to get something like

CodePudding user response：

Make your elements flex, it's the easiest solution. Add these Bootstrap classes to your elements that need to be vertically centered like this :

 <nav >
  <h3>For a few dollar</h3>
  <br />
  <div >
    <div >
      <i ></i>
      Answer simple question
    </div>
    <div >
      <i ></i>
      Download and print
    </div>
    <div >
      <i ></i>
      It take less then 10 minutes
    </div>
  </div>
</nav>

CodePudding user response：

or with simple CSS.

Surround your texts with a p tag, with a classname to give the margin-letf

Ex :

  <div >
      <i ></i>
      <p >Answer simple question</p>
   </div>

and then apply css to your <div > :

.col {
  display:flex;
  align-items:center;
}

.col .descr {
  margin-left: 10px
}