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

我是新来的前端开发人员，我试图在图片下方的同一行中获取Facebook分享和Twitter推文按钮，但无法做到。如何确保2行元素完美对齐？

<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

来源

2016-08-16 eager_coder

请张贴如果您创建一个基本的演示的CSS太 – Chris

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

一种方式显示：inline-block的和垂直对齐：中间另一种现代的方式是使用显示器挠性的父元素和调整自我：中心子元素

只是调整您的浏览器中看到的结果

<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/为柔性方式;

来源

2016-08-16 18:31:53

就好了。谢谢 – Aziz

如果你更新你的css和你的破解代码，我也可以为你编辑，但是我会根据你的HTML编写它。 –

我不是OP。 – Aziz

你也可以浮动的元素

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

来源

2016-08-16 18:51:22 user3526204

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

回答

相关问题