Плавающие элементы должны быть центрированы внутри таблицы-ячейки li

Question

Этот человек сбил меня с ума - я могу найти только частичные ответы, которые не будут работать во всем моем коде. Я пытаюсь центрировать встроенный список смешанных «похожих кнопок» (фрагменты <script> с внешних сайтов) и изображения (которые я установил как , где «как кнопки» недоступны)

Требования : 1. Все должно быть выровнено с верхним краем родительского div, поэтому я использовал ul, li, display: table и display: table-cell для выравнивания сверху (а не только встроенного блока) 2. Все должно быть на одной горизонтальной линии, поэтому их нужно плавать (при отсутствии встроенного блока) 3. Все должно быть сосредоточено (это бит, которого я не могу достичь!)

Это мой первый раз, когда я использовал f orum, и я не являюсь веб-дизайнером, поэтому, пожалуйста, будьте осторожны! Я прикрепил код, который, по моему мнению, релевантен и полезен.

#contact { 
 
    position: relative; 
 
    top: 1em; 
 
    margin-left: 0; 
 
    width: 100%; 
 
    display: inline-block; 
 
} 
 
#contactinfo { 
 
    margin-right: 0; 
 
    color: #00CCFF; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    width: 100%; 
 
    padding-bottom: 1em; 
 
} 
 
#share { 
 
    position: relative; 
 
    text-align: center; 
 
    min-height: 1em; 
 
    display: inline; 
 
    vertical-align: top; 
 
} 
 
ul.button { 
 
    display: table; 
 
    min-height: 2em; 
 
    list-style: none; 
 
    list-style-position: inside; 
 
    padding-left: 0.5em; 
 
    margin-left: 0em; 
 
    text-align: center; 
 
    float: right; 
 
} 
 
ul.button li { 
 
    display: table-row; 
 
    vertical-align: top; 
 
    text-align: center; 
 
    height: 2em; 
 
    padding: 0.5em; 
 
} 
 
img.sharebutton { 
 
    max-width: 50px; 
 
    max-height: 35px; 
 
    padding-bottom: 1em; 
 
}

<div id="contact"> 
 
    <div id="contactinfo"> 
 
    <h2> 
 
email <a href="mailto:info@lysamorrison.com"> info@lysamorrison.com</a><br> 
 
call 0796 99 777 68 
 
</h2> 
 
    </div> 
 
    <div id="share"> 
 
    <div class="sharebuttons"> 
 
     <ul class="button"> 
 
     <li> 
 
      <a href="http://www.eventbrite.com/o/lma-training-amp-consultancy-8057832740" target="_blank"> 
 
      <img src="eventbrite.png" class="sharebutton" /> 
 
      </a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <div class="sharebuttons"> 
 
     <ul class="button"> 
 
     <li> 
 
      <a href="http://www.meetup.com/LMA-Personal-Professional-Development-Whitley-Bay-Meetup/#upcoming" target="_blank"> 
 
      <img src="meetup.png" class="sharebutton" /> 
 
      </a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <div class="sharebuttons"> 
 
     <ul class="button"> 
 
     <li> 
 
      <script src="//platform.linkedin.com/in.js" type="text/javascript"> 
 
      lang: en_US 
 
      </script> 
 
      <script type="IN/FollowCompany" data-id="1586406"></script> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <div class="sharebuttons"> 
 
     <ul class="button"> 
 
     <li><a href="https://twitter.com/LMAtrainconsult" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @LMAtrainconsult</a> 
 
      <script> 
 
      ! function(d, s, id) { 
 
       var js, fjs = d.getElementsByTagName(s)[0], 
 
       p = /^http:/.test(d.location) ? 'http' : 'https'; 
 
       if (!d.getElementById(id)) { 
 
       js = d.createElement(s); 
 
       js.id = id; 
 
       js.src = p + '://platform.twitter.com/widgets.js'; 
 
       fjs.parentNode.insertBefore(js, fjs); 
 
       } 
 
      }(document, 'script', 'twitter-wjs'); 
 
      </script> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <div class="sharebuttons"> 
 
     <ul class="button"> 
 
     <li> 
 
      <div class="fb-follow" data-href="https://www.facebook.com/lmatrainingandconsultancy" data-height="35" data-layout="button" data-show-faces="true"></div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <!--End of share div--> 
 
</div>

Answer 1

Flexbox является решением здесь; используя 3 специфических свойства для удовлетворения ваших потребностей.

1. Установка align-items к flex-start держит детей вертикально выровненных к вершине их родителей.
2. flex-wrap до nowrap (значение по умолчанию) гарантирует, что дети останутся на одной линии .
3. Установка justify-content к center центрирует детей по горизонтали в пределах родительского

Вот упрощенный пример:

*{box-sizing:border-box;margin:0;padding:0;vertical-align:middle;} 
 
ul{ 
 
    background:black; 
 
    align-items:flex-start; 
 
    display:flex; 
 
    flex-flow:row nowrap; 
 
    justify-content:center; 
 
    list-style:none; 
 
    padding:2px; 
 
} 
 
li{ 
 
    margin:2px; 
 
}

<ul> 
 
    <li><a href="#"><img height="80" src="http://lorempixel.com/100/80/abstract/1/" width="100"></a></li> 
 
    <li><a href="#"><img height="50" src="http://lorempixel.com/75/50/abstract/2/" width="75"></a></li> 
 
    <li><a href="#"><img height="150" src="http://lorempixel.com/75/50/abstract/3/" width="200"></a></li> 
 
</ul>