Align three divs - html

Question

I am trying to align three divs across my page with one always staying center and the others of equal spacing apart. I have what I think is most of the code I need I just cant seem to get the spacing to work.
#Partnerships div {
height: 600px;
width: 100%;
margin-left: 10px;
margin-top: 10px;
Padding: 10px;
float: left;
background-color: #000000;
color:#FFFFFF;
border-radius: 15px 15px 15px 15px;
}
#Robe
{float:left;
width:100px;}
#Avolites
{float:right;
width:100px;}
#UKProductions
{margin:0 auto;
width:100px;}
<div id="Partnerships div">
<div id="Robe">
<h1>Robe</h1>
<p></p>
<a href="http://www.robe.cz/" target="_blank">
<img src="" alt="RobeLogo" height="100" width="200" >
</a>
</div>
<div id="Avolites">
<h1>Avolites</h1>
<p></p>
<a href="" target="_blank">
<img src="" alt="AvolitesLogo" height="100" width="200">
</a>
</div>
<div id="UKProductions">
<h1>UkProductions</h1>
<p></p>
<a href="" target="_blank">
<img src="" alt="UkProductionsLogo" height="100" width="200">
</a>
</div>

Answer 1

You can use this example as a guide for your solution:
Flexbox takes care of the alignment horizontally.
#Partnerships {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
background-color: lightgrey;
}
#Partnerships div {
background-color: cornflowerblue;
width: 300px;
margin: 10px;
}
<div id="Partnerships">
<div id="Robe">
<h1>Robe</h1>
<a href="http://www.robe.cz/" target="_blank">
<img src="" alt="RobeLogo" height="100" width="200" >
</a>
</div>
<div id="Avolites">
<h1>Avolites</h1>
<a href="" target="_blank">
<img src="" alt="AvolitesLogo" height="100" width="200">
</a>
</div>
<div id="UKProductions">
<h1>UkProductions</h1>
<a href="" target="_blank">
<img src="" alt="UkProductionsLogo" height="100" width="200">
</a>
</div>
</div>

Answer 2

Add this to these code:
#Robe, #Avolites {
display: block;
}
#UKProductions {
display: inline-block;
}
#Partnerships {
text-align: center;
}