html - 对齐三个div

Question

我正在尝试将页面上的三个 div 对齐，其中一个始终保持居中，而其他间距相等。我认为我拥有我需要的大部分代码，但我似乎无法让间距正常工作。

#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

您可以使用此示例作为解决方案的指南:

Flexbox 负责水平对齐。

#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>