How to make a footer?

[k0fi]

This should be trivial, but I can not make a horizontal vertically centered footer:

<footer>   
      <ul class="navbar-center">
      <li class="nav-item"><a href="/">Home</a></li>
      <li class="nav-item"><a href="/about">About</a></li>
      <li class="nav-item"><a href="/faq">FAQ</a></li>
      </ul>
</footer>

What is the secterly way to do so?

[tunjioye]

Spectre dows not provide such a feature by default. But u can use CSS FLEX BOX to achieve it.

Here is a sample code I wrote :

<div
  class="px-2"
  style="
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
  "
>
  <div class="">
    <small>
      <ul class="nav">
        <li class="nav-item">
          <strong>
            <a href="">HOW IT WORKS</a>
          </strong>
        </li>
        <li class="nav-item">
          <a href="" title="Setup Election">Setup Election</a>
        </li>
        <li class="nav-item">
          <a href="" title="Voting Process">Voting Process</a>
        </li>
        <li class="nav-item">
          <a href="" title="Election Result">Election Result</a>
        </li>
        <li class="nav-item">
          <a href=""title="Some Election Types">Some Election Types</a>
        </li>
        <li class="nav-item">
          <a href="">Demo Election</a>
        </li>
      </ul>
    </small>
  </div>
  <div class="">
    <div class="clearfix"></div>

    <small>
      <ul class="nav">
        <li class="nav-item">
          <strong>
          `<a href="">SERVICES WE OFFER</a>
          </strong>
        </li>
        <li class="nav-item">
          <a href="" title="Self Service">Self Service</a>
        </li>
        <li class="nav-item">
          <a href="" title="Assisted Service">Assisted Service</a>
        </li>
        <li class="nav-item">
          <a href="" title="Managed Service">Managed Service</a>
        </li>
        <li class="nav-item">
          <a href="" title="Voting Center Service">Voting Center Service</a>
        </li>
        <li class="nav-item">
          <a href="" title="Service Cost">Service Cost</a>
        </li>
      </ul>
    </small>
  </div>
  <div class="">
    <div class="show-xs">
      <div class="clearfix"></div>
      <br />
    </div>
    <small>
      <div class="mb-2 px-2">
        <dl>
          <dt>Contact us</dt>
          <dd>
            <a href="#contact-form">via contact form</a>
          </dd>
        </dl>
        <dl>
          <dt>Give us a call</dt>
          <dd><a href="">+234 XXX XXX XXXX</a></dd>
        </dl>
        <dl>
          <dt>Send us a mail</dt>
          <dd>
            <a href="">support@email.com</a>
          </dd>
        </dl>
        <dl>
          <dt>Support Us</dt>
          <dd>
            <a href="" title="support us with a donation using paystack" target="_blank">support us with a donation</a
            >
          </dd>
        </dl>
      </div>
    </small>
  </div>
</div>