css - 如何将图标字段与顶部对齐，以primefaces组件为引用

如何将图标字段顶部对齐-带JSF2的Primefaces 3.2。

我正在处理一个组合框，该组合框由用户端表示业务逻辑的复杂概念。因此，该字段将具有一个图标（带有图形图像的链接），该图标可以发出解释以使用户更好地理解该概念。问题在于，该图标不会在顶部对齐（以组合框的高度作为参考）。波纹管具有代码和当前表示的图像。

码：

<h:outputLink id="stockBlockedProductsWithAllStockBlockedInfo" value="#">
    <p:graphicImage library="images" name="information.png" width="16px"/>
</h:outputLink>
<p:tooltip for="stockBlockedProductsWithAllStockBlockedInfo"
    showEffect="slide" hideEffect="slide" >
    <span style="white-space: nowrap">
        <h:outputText escape="false" value="#webcore_view['Informação']}"/>
    </span>
</p:tooltip>

Observe that the info icon (i) is align to bottom of the field

谢谢大家！

最佳答案

我将说明如何解决此任务：

我直接通过组件设置了样式垂直对齐方式。

而且非常简单，只需添加正确的样式对齐即可：

style="vertical-align: top;"

正确的代码如下所示：

<h:outputLink id="stockBlockedProductsWithAllStockBlockedInfo" value="#">
    <p:graphicImage library="images" name="information.png" width="16px"
        style="vertical-align: top;"/>
</h:outputLink>
<p:tooltip for="stockBlockedProductsWithAllStockBlockedInfo"
    showEffect="slide" hideEffect="slide" >
    <span style="white-space: nowrap">
        <h:outputText escape="false" value="#webcore_view['Informação']}"/>
    </span>
</p:tooltip>

And the correct position is like that:

关于css - 如何将图标字段与顶部对齐，以primefaces组件为引用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53208643/