html - 无法使用 span/div 对齐社交按钮

Question

我试过乱用 css 和 html 代码，但我似乎根本无法让社交图标对齐。我想将 Facebook 和 Twitter 的共享按钮彼此相邻对齐，并在它们之间进行部分填充。

这是目前的样子:

代码如下:

            <div class="col-md-6">
                <div class="heading display-3 mb-4"><span style="-webkit-text-stroke: 2px black;"></span>Saint Louis Events</div>
                <p class="headingParagraph">Don't know who we are? What we do? There's no doubt that we are the ultimate underdogs, but usually the smallest bark the loudest and we're here to stay.
                    <br><b>We will prevail. We will impress. We are here for you.</b>
                </p>
                <div class="svg-wrapper">
                    <svg height="40" width="180" xmlns="http://www.w3.org/2000/svg">
                      <rect class="shape" height="40" width="180" />
                    </svg>
                      <div class="text">ABOUT US</div>
                </div>
                <span>
                    <div class="fb-share-button" data-href="http://www.eventsinstlouis.com/" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.eventsinstlouis.com%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>
                </span>
                <span>
                    <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-url="http://www.eventsinstlouis.com/" data-hashtags="stlouisevents" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
                </span>
            </div>

Answer 1

我能够找到 Facebook 在哪里预定义 vertical-align: bottom 属性，但我没有看到可以定义的类来覆盖它，我如何才能覆盖它？