html - 如何确保 2 行元素完全对齐？

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: inline-block 和 vertical-align: middle 另一种现代方式是对父元素使用 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/灵活的方式；