HTML CSS examples for CSS Layout:Flex Center
Center two divs horizontally in a flex container
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> <style id="compiled-css" type="text/css"> #sharesocial {<!-- w ww. java2 s . c o m--> background:Chartreuse none repeat scroll 0 0; border-radius:11px; display:flex; flex-direction:column; height:100px; justify-content:center; width:175px; align-items:center; } #sharecondividi { align-self:center; color:yellow; display:flex; text-align:center; } #shareicons { align-items:center; background:blue none repeat scroll 0 0; border-radius:6px; display:flex; height:51%; justify-content:space-around; width:96%; } #twitterbt, #googleplusbt, #facebookbt { font-size:41px; } #twitterbt { color:pink; } #googleplusbt { color:WhiteSmoke; } #facebookbt { color:OrangeRed; } </style> </head> <body> <div id="sharesocial"> <div id="sharecondividi"> Condividi </div> <div id="shareicons"> <a target="blank" href=""> <span class="fa fa-twitter-square" id="twitterbt"></span> </a> <a target="blank" href=""> <span class="fa fa-google-plus-square" id="googleplusbt"></span> </a> <a target="blank" href=""> <span class="fa fa-facebook-square" id="facebookbt"></span> </a> </div> </div> </body> </html>