如何確保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行元素完美對齊？

回答

相關問題