Align 3 elements in css

[m0j1]

I have 3 elements which I want to align in my html file. 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.
can independently align elements horizontally and vertically with below code :

#element{
height : 40%;
position : relative;
left : 50%;
top : 50%;
transform : translate(-50%,-50%);
}

but when it comes to align elements along each other they don’t place correctly.
I’ll appreciate if you can help me with this.
Thanks very much

[Paulie_D]

It’s not quite clear to me what you are after…could you make a Codepen.io demo?

[m0j1]

I’m trying to achieve something like this. where the orange background itself is a div which contains the 3 elements : http://imgur.com/UwFhNc4

[Paulie_D]

http://codepen.io/Paulie-D/pen/qEKWjv

http://stackoverflow.com/questions/11589590/text-align-justify-inline-block-elements-properly

[m0j1]

I managed to solve it by using a container for each of the elements. I have wrote the codes in cssdesk here :
http://www.cssdesk.com/Z98q3
The strange thing is that it works on different browsers in desktop and mobile. But I want to use it in my Android webview application, and when I use it there in android 4.4+ devices , the positions of the elements are not correct. I know there has been some changes in android kitkat’s webview but migration documents also didn’t help me.
I’ll appreciate if you can help me with this.
Thanks very much

[Author]

Posts