Как выровнять объект под зависшим меню

Question

Под моими сообщениями у меня есть кнопка «Читать дальше» и несколько кнопок. Моя последняя кнопка - это кнопка общего доступа, и когда вы наводите на нее курсор, под ней появляется меню социальной акции. Проблема в том, что все кнопки выравниваются рядом друг с другом, которые я хочу, однако, когда вы наводите курсор на кнопку совместного доступа, кнопка «доля» перемещается вверх, а меню социальной акции отображается в соответствии с другими кнопками. Как я могу сделать это так, чтобы меню социальной поддержки появилось под всеми кнопками, а кнопка совместного доступа всегда совпадает с другими кнопками? Заранее спасибо. Вот скрипка - https://jsfiddle.net/5mgoktLs/2/

* Я также хочу, чтобы меню доля быть в центре под кнопкой доля

Кнопки перед висения ...

при наведении мыши на кнопку Отправить ... (я хочу, чтобы кнопка совместного доступа всегда оставалась совмещенной с другими кнопками)

HTML

<img class="abother-reply" src="http://amandoblogs.com/wp-content/uploads/2014/08/share-e1408475480528.png" /> 
 
    <img class="reply" src="http://amandoblogs.com/wp-content/uploads/2014/08/share-e1408475480528.png" /> 
 
<div class="wrap"> 
 

 
    <img class="main-share button" src="http://amandoblogs.com/wp-content/uploads/2014/08/share-e1408475480528.png" /> 
 

 
    <div class="share-buttons"> 
 

 
    <a href="http://twitter.com/home/?status=Love this post by @ <?php the_title(); ?> - <?php the_permalink(); ?>" target="_blank" title="Tweet this!"><img src="https://www.theclimategroup.org/sites/all/modules/custom/tcg_social_media_icons/icons/black/16x16/twitter.png"></a> 
 

 
    <a href="http://www.facebook.com/sharer.php?url=<?php the_permalink(); ?>" target="_blank"> 
 
     <img src="http://www.shipwreckmuseum.com/wp-content/themes/shipwreckmuseum/assets/facebook-icon.png" alt="Facebook" /> 
 
    </a> 
 

 
    <a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());"> 
 
     <img src="https://lh4.googleusercontent.com/-FaD4j4FL1Bc/TuEf9aN1gEI/AAAAAAAABek/kVqztZRwJ1w/s128/Pinterest_Favicon.png" alt="Pinterest" /> 
 
    </a> 
 

 
    <a href="http://www.facebook.com/sharer.php?url=<?php the_permalink(); ?>" target="_blank"> 
 
     <img src="http://www.ihatestevensinger.com/osafe_theme/images/user_content/images/icon-heart.png" alt="Heart" /> 
 
    </a> 
 

 
    </div> 
 
</div>

CSS

.wrap:hover .share-buttons { 
 
    display:block; 
 
} 
 
.share-buttons { 
 
    display: none; 
 
    letter-spacing: 5px; 
 
} 
 
.wrap { 
 
    display: inline-block; 
 
} 
 
.reply { 
 
    display: inline-block; 
 
} 
 
.another-reply { 
 
    display: inline-block; 
 
}

Answer 1

Это фиксированное для меня:

.wrap:hover .share-buttons { 
    display:block; 
    position: absolute; 
} 

Обновлено: Если вы хотите, чтобы он был центрирован, это немного хакки, но он работает!

.wrap:hover .share-buttons { 
display: block; 
position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, 30%); 
white-space: nowrap; 
} 

.wrap { 
position: relative; 
display: inline-block; 
} 

Answer 2

Попробуйте изменить CSS к этому:

.wrap:hover .share-buttons { 
    display: inline-block; 
    position: absolute; 
}