Menu
I'm looking forward to build a tooltip which is positioned next to the element, but in a middle of it. It's easy to put it over and under and position it in the horizontal center of an element. But is there a way to do so vertically (on the right or left side of an element, vertically positioned in a middle of that element height)?
For my purpose, height of the element is fixed (known) & height of tooltip is not, because it can contain various text content. And a tooltip can be a child of element.
However, I'm also curious about, how to do it when both heights are not fixed (unknown and can vary depending on content). By heights I understand element's and tooltip's height. Width can be known and fixed.
809
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
Center Align Elements To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.
Relative Positioning So "left:20" adds 20 pixels to the element's LEFT position. You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document. Move Left - Use a negative value for left. Move Right - Use a positive value for left.
This is pretty late but I tried to make an example on codepen which shows a working example if I understood your question correctly.
http://codepen.io/trgraglia/pen/RWbKyj
Use CSS transform.
For example, transform:translateX(-50%);, will move an element left by 50% of ITSELF. Now you can align it to the parent with position and bottom or top or left or right and then move it by the dimensions of itself.
Hope this helps!
191
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
