CSS如何将元素放置在另一个元素的中间(半高/垂直50％) [英] CSS how to position an element in a middle (half height / vertical 50%) of another element

问题描述

我期待构建一个位于元素旁边的工具提示.将它放在元素中心上方和下方都很容易.但是有没有办法垂直(在元素的右侧或左侧，垂直放置在该元素高度的中间)呢?

I'm looking forward to build a tooltip which is positioned next to the element. It's easy to put it over and under in the center of 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)?

出于我的目的，该元素的高度已知&工具提示的高度不是.工具提示可以是element的子代.

For my purpose, height of the element is known & height of tooltip is not. And tooltip can be a child of element.

但是，当两个高度都不知道时，我也很好奇.通过高度，我了解元素和工具提示的高度.宽度是已知的并且是固定的.

However, I'm also curious about how to do it when both heights are unknown. By heights I understand element's and tooltip's height. Width can be known and fixed.

推荐答案

这很晚了，但是我试图在codepen上举一个例子，如果我正确理解了您的问题，它会给出一个可行的例子.

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

使用CSS转换.

例如，transform:translateX(-50%);，会将元素左移ITSELF的50％.现在，您可以使用position和bottom或top或left或right将其与父对象对齐，然后按其自身尺寸移动.

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.

希望这会有所帮助！

这篇关于CSS如何将元素放置在另一个元素的中间(半高/垂直50％)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！