Tengo dos fragmentos de código que quiero poner en la misma línea y en el centro, pero no puedo hacer el Número 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>Número 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>Puede usar flexbox en el padre de ambos 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; }En este caso elegí el cuerpo como elemento padre. Flexbox de forma predeterminada tiene una dirección flexible de fila, por lo que puede usar justificar contenido para centrarlos horizontalmente y alinear elementos para centrarlos verticalmente
Para alinear los elementos del bloque, puede usar la visualización de propiedades css: flex. Pon tu código de ejemplo de arriba dentro de un envoltorio. Asigne el envoltorio con esta 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>