I have this add icon in my navigation bar and i've been trying to center it inside .
<https://i.stack.imgur.com/q8ORT.png>

HTML code

```
            <div>
            <select name="projects" id="projects">
                <option>Example</option>
                <option>Example</option>
                <option>Example</option>
            </select>
            <i class='bx bxs-book-add' id="add"></i>
            <input type="text" placeholder="Search"/>
            </div>

```

SCSS code

```
div {
    align-content: center;
    border: 1px solid black;

    select {
      width: 40%;
      height: 100%;
      border: none;
      background: rgb(131, 197, 190);
    }
    #add {
      border: 1px solid blue;
      text-align: center;
      font-size: 1.5em;
    }

```