Align 3 elements in css <p>I have 3 elements which I want to align in my html file. I have attached a sample image, the first image just has a left margin and is vertically centered. the middle element is vertically and horizontally centered and the third element has right margin and is vertically centered.<br/><br/> <img src="https://i.stack.imgur.com/BJnFe.png" alt="enter image description here"> I can independently align elements horizontally and vertically with below code : </p> <pre><code>#element{ height : 40%; position : relative; left : 50%; top : 50%; transform : translate(-50%,-50%); } </code></pre> <p>but when it comes to align elements along each other they don't place correctly.<br/> I'll appreciate if you can help me with this.<br/> Thanks very much</p>