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>
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
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>