The buttons

Center the row of buttons

There is no alignment option, because a kit is an ordinary element in your page and your own CSS already decides where it sits. Three lines centre it. The same three with flex-end push it to the right, and nothing about the buttons changes either way.

The code

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_linkedin"></a>
  <a class="ats_btn_whatsapp"></a>
  <a class="ats_dd"></a>
</div>

Why width is in there

A kit is inline-flex by default, so it is only as wide as its buttons and there is nothing for justify-content to distribute. Making it a full-width flex row is what gives the centring something to work with.

The other two positions

Same rule, one word changed.

.ats_kit { justify-content: flex-start; }  /* the default */
.ats_kit { justify-content: flex-end; }    /* right */

Live demo

Demo ↗

An article worth passing on

The same row every other page shows, centred by the CSS below rather than by anything we did.

Services (4 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<style>
.ats_kit {
  display: flex;
  justify-content: center;
  width: 100%;
}
</style>

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_linkedin"></a>
  <a class="ats_btn_whatsapp"></a>
  <a class="ats_dd"></a>
</div>

<script async src="//static.addtosite.com/widget.js"></script>