HTML, CSS, Bootstrap - Two columns with centering -
i trying make little website should have 2 columns, , each column should have content centered.
however, have noticed columns follow height of each other, , not act individual columns. e.g. whenever add content 1 of columns, content of other column moved fit height of column.
in jsfiddle, can see "hello" on right side not centered; has been moved stand in line first of 3 "hello"'s on left side. so, whenever add content 1 column, doesn't affect other - "hello" on right side should ideally stay centered.
jsfiddle: https://jsfiddle.net/goupb2ch/1/
i have worked on quite while now. ideas? thanks!
consider using flexbox solve problem: in case far less code required.
https://jsfiddle.net/upwgk2u4/
.container { display: flex; text-align: center; height: 100%; } .container > div { flex: 1; align-self: center; }
Comments
Post a Comment