CSS如何将元素定位在半高(垂直50%)

前端之家收集整理的这篇文章主要介绍了CSS如何将元素定位在半高(垂直50%)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我期待着构建一个位于元素旁边的工具提示.在元素的中心放置它很容易.但有没有办法垂直地这样做(在元素的右侧或左侧垂直位于元素高度的中间)?

为了我的目的,元素的高度是已知的&工具提示的高度不是.工具提示可以是元素的子元素.

但是,当两个高度都未知时,我也很好奇如何做到这一点.通过高度我理解元素和工具提示的高度.宽度可以是已知的并且是固定的.

解决方法

这已经很晚了,但我试着在codepen上做一个例子,如果我正确理解你的问题,它会显示一个工作示例.

http://codepen.io/trgraglia/pen/RWbKyj

使用CSS转换.

例如,transform:translateX(-50%);,会将元素向左移动50%的ITSELF.现在,您可以将其与位置和底部或顶部或左侧或右侧的父级对齐,然后按其自身的尺寸移动它.

希望这可以帮助!

原文链接:https://www.f2er.com/css/216196.html

猜你在找的CSS相关文章