html - Align three divs -
i trying align 3 divs across page 1 staying center , others of equal spacing apart. have think of code need cant seem spacing 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>
you can use example guide solution:
flexbox takes care of 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>
Comments
Post a Comment