Floating elements need to be centered within a table-cell li - css

Question

This one has driven me crazy - I can only find partial answers that won't work within the entirety of my code. I'm trying to center an inline list of mixed 'like buttons' (pieces of <script> from external sites) and images (which I've set up as <a>s where 'like buttons' are not available)
The requirements are:
1. Everything needs to be aligned to the top edge of the parent div - which is why I've used ul, li, display:table and display:table-cell to align to top (and not just inline-block)
2. Everything needs to be on the same horizontal line, which is why they need to be floated (in the absence of inline-block)
3. Everything needs to be centred (this is the bit I can't achieve!)
This is my first time using the forum, and I'm not really a web-designer so please be gentle! I've attached what code I think is relevant and helpful.
#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 info#lysamorrison.com<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>Follow #LMAtrainconsult
<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 is the solution here; using 3 specific properties to address your needs.
Setting
align-items
to flex-start keeps the children vertically aligned to the top of
their parent.
Setting
flex-wrap
to nowrap (the default value) ensures the children stay on one
line.
Setting
justify-content
to center centres the children horizontally within the parent
Here's a simplified example:
*{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><img height="80" src="http://lorempixel.com/100/80/abstract/1/" width="100"></li>
<li><img height="50" src="http://lorempixel.com/75/50/abstract/2/" width="75"></li>
<li><img height="150" src="http://lorempixel.com/75/50/abstract/3/" width="200"></li>
</ul>