Question

我有一个属性信息表，每个标题都有一个工具提示。我需要将工具提示放置在标签的右侧，并使其垂直居中。我处于CSS初学者的境地，并使用它来处理html元素。这是我的代码的JSFiddle。这是一个很大的项目，所以我无法获得所有的css以使其与随附的图片相匹配，但是希望您能够掌握总体思路。

如果您只需要看一下，这里是我的表头示例。

<th rowspan="2" data-field="Address">
  <span>Property<br />address</span>
    <a style="position: relative; top: 25%; right: 0;" tabindex="0" role="button" 
      data-toggle="popover" data-container="body" data-trigger="hover click" 
      title="Property address" data-content="An all-inclusive list of properties associated 
      to your agreement">
        <span class="glyphicon glyphicon-question-sign info-popover"></span>
    </a>
</th>

http://jsfiddle.net/gsxb0c65

Answer 1

您可以使用position来完成此操作。

您将从制作<th style="position: relative;">开始，这将允许放置在其中的项目遵守自己的界限。

接下来，您将<a>放入其中，并使其position: absolute;，如下所示：

th > a {
    position: absolute;
    //these two rules put it vertically centered no matter what inside of the container
    top: 50%;
    transform: translateY(-50%);
    //and then set the right to however far you'd like it away from the right side of the <th>
    right: 20px;
}

您可能还希望text-align: center; <a>，因此图标始终以您显示的方式位于其中心。但是，此规则应使您可以更接近所需的内容。

编辑：为您的小提琴添加了更新http://jsfiddle.net/2468jgew/

EDIT2 ：这是另一个StackOverflow帖子，解释了我为您制定的规则Transform: translate(-50%, -50%)

需要帮助，将工具提示放置在标签的右侧

1 个答案: