13

我期待构建一个位于元素旁边但位于元素中间的工具提示。很容易将它放在上面和下面并将其放置在元素的水平中心。但是有没有办法做到垂直（在元素的右侧或左侧，垂直定位在该元素高度的中间）？

出于我的目的，元素的高度是固定的（已知的）而工具提示的高度不是，因为它可以包含各种文本内容。工具提示可以是元素的子元素。

但是，我也很好奇，当两个高度都不是固定的（未知并且可能因内容而异）时如何做到这一点。通过高度，我了解元素和工具提示的高度。宽度可以是已知的并且是固定的。

4

4 回答 4

38

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

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

使用 CSS 变换。

例如，transform:translateX(-50%);, 会将元素向左移动 50% 的 ITSELF。position现在，您可以使用andbottom或topor leftor将其与父级对齐right，然后按其自身的尺寸移动它。

希望这可以帮助！

于 2015-08-27T13:29:01.587 回答
3

使用 CSS 和 jQuery-

CSS

.div{
    top:50%
}

jQuery

var divheight = $(.div).height() / 2;
$(.div).attr('style','margin-top:-'+divheight+'px;');
于 2013-02-18T16:42:38.863 回答
2

如果你不知道这两个高度，只有两种方法：

  1. 设置父母display: table和孩子display: table-cell和vertical-align: middle。
  2. 使用 CSS3 Flexbox：http ://www.w3.org/TR/css3-flexbox/但浏览器支持有限：http ://caniuse.com/#search=flexbox

如果你对这个话题感兴趣，这里有一篇很好的文章，里面有更多提示： http ://www.vanseodesign.com/css/vertical-centering/

如您所见，在不知道元素高度和使用 CSS3 的情况下垂直对齐元素的唯一方法是使用display: table-cell.

于 2013-02-18T16:21:56.860 回答
1

如果您知道内容的高度，使工具提示居中的最简单方法是将工具提示设置为内容的高度。您可以在jsFiddleline-height看到我是如何做到的

于 2013-02-18T16:59:18.217 回答