Question

我是前端开发的新手，我正试图在图片下方的同一行中获取Facebook分享和Twitter推特按钮，但我无法做到。

<figure><img src=" " alt=""></figure>
 <div class="row">
    <a class="twitter-share-button" href="https://twitter.com/share" data-url=" ">Tweet</a>
    <div class="fb-share-button" data-href="" data-layout="button" data-mobile-iframe="true">
    <a class="fb-xfbml-parse-ignore" target="_blank" 
     href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Flink%2F&amp;src=sdkpreparse">
     Share</a>
    </div>
 </div>

无论我做什么，我都无法将它们放在图像下方，在右侧对齐。这就是我得到的： enter image description here

Answer 1

有很多方法可以做到这一点

一种方式是显示：内联块和垂直对齐：中间另一种现代方法是使用display flex作为父元素，使用align-self：center作为子元素

只需调整浏览器大小即可查看结果

<figure><img src=" " alt=""></figure>
<div class="row">
<a class="twitter-share-button"
 href="https://twitter.com/share"
 data-url=" ">Tweet</a>
<div class="fb-share-button" data-href=""
 data-layout="button"
 data-mobile-iframe="true">
 THERE IS A LOT OF TEXT HERE
<a class="fb-xfbml-parse-ignore" target="_blank" 
 href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Flink%2F&amp;src=sdkpreparse">
 Share</a>
</div>
</div>

.row {
  display: flex;
}

.fb-share-button, .twitter-share-button {
  align-self: center;
}

对于弹性方式，

https://jsfiddle.net/mpna771s/3/;

Answer 2

你也可以浮动元素

        <div class="row">
        <div class="smedia">
            <div class="twitter">
                <a class="twitter-share-button"  href="https://twitter.com/share"  data-url=" ">Tweet</a>
            </div>

            <div class="fb">
            <div class="fb-share-button" data-href="" data-layout="button"   data-mobile-iframe="true">
                 THERE IS A LOT OF TEXT HERE
                <a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Flink%2F&amp;src=sdkpreparse">Share</a>
            </div>
            </div>
        </div>
        </div>

CSS

        <style type="text/css">
          .smedia{width:100px;margion:0 auto}
          .twitter, .fb{float:left;margin:10px;}
        </style>

如何确保2个行元素完美对齐？

2 个答案: