3つのdivを整列する

Question

私のページに3つの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

あなたはあなたの解決のためのガイドとしてこの例を使用することができます。

フレキシボックスは水平方向の位置合わせの世話をします。

#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

は、これらのコードにこれを追加します。

#Robe, #Avolites { 
display: block; 
} 
#UKProductions { 
display: inline-block; 
} 
#Partnerships { 
text-align: center; 
}