How to center 2 divs using CSS/JS

Question

I have two snippets of code that I want to put in the same line and center, but am unable to do Number 1:

<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
  <a class="a2a_button_facebook"></a>
  <a class="a2a_button_twitter"></a>
  <a class="a2a_button_whatsapp"></a>
  <a class="a2a_button_pinterest"></a>
  <a class="a2a_button_reddit"></a>
  <a class="a2a_button_line"></a>
  <a class="a2a_button_copy_link"></a>
  </div>
  

  <script async src="https://static.addtoany.com/menu/page.js"></script>

Number 2:

<span class="likebtn-wrapper" data-theme="drop" data-ef_voting="grow" data-rich_snippet="true">

</span>
<script>(
  function (d, e, s) { 
    if (d.getElementById("likebtn_wjs")) 
    return; 
    a = d.createElement(e); 
    m = d.getElementsByTagName(e)[0]; 
    a.async = 1; a.id = "likebtn_wjs"; 
    a.src = s; 
    m.parentNode.insertBefore(a, m) 
    })
    (document, "script", "//w.likebtn.com/js/w/widget.js");
</script>

[11 Ways to Center Div or Text in Div in CSS](https://blog.hubspot.com/website/center-div-css) — evolutionxbox, Jan 22 '22 at 09:51

score 0 · Answer 1 · answered Jan 22 '22 at 10:18

You can use flexbox on the parent of both the divs.

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  div {
    height: 200px;
    width: 300px;
  }
  .div1 {
    background-color: aqua;
  }
  .div2 {
    background-color: blueviolet;
  }

In this case I chose the body as parent element. Flexbox by default has flex-direction of row, thus you can use justify-content to center them horizzontaly and align-items to center them vertically

score 0 · Answer 2 · answered Jan 22 '22 at 10:29

To align to block elements you can use css property display: flex. Put your example code from above inside a wrapper. Assign the wrapper with these css property display: flex;.

(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");

.w {
  display: flex;
}

<div class="w">
  <div class="a2a_kit a2a_kit_size_32 a2a_default_style"><a class="a2a_button_facebook"></a>
    <a class="a2a_button_twitter"></a>
    <a class="a2a_button_whatsapp"></a>
    <a class="a2a_button_pinterest"></a><a class="a2a_button_reddit"></a><a class="a2a_button_line"></a><a class="a2a_button_copy_link"></a></div>
  <script async src="https://static.addtoany.com/menu/page.js"></script>



<span class="likebtn-wrapper" data-theme="drop" data-ef_voting="grow" data-rich_snippet="true"></span> 

</div>

How to center 2 divs using CSS/JS

2 Answers2