如何使用 JSF 水平对齐图像

Question

我确定这是重复的，但我在此处和网上其他地方找到的内容对我不起作用。

无论我做什么，下面代码中的图像都是垂直对齐的，但我希望它们水平对齐。

<script>
    var aa = "src='images/img?r=' + Math.random()"
    var bb = "src='images/trans?x=' + Math.random()"
</script>
<hr />

<h:panelGroup layout="horizontal">
    <h:form>
        <h:commandLink>
            <h:graphicImage width="100" id="img1"
                value="images/img?r=1#{Math.random()}" alt="not found">
            </h:graphicImage>
            <f:ajax render="@this :pg2"></f:ajax>
        </h:commandLink>
    </h:form>

    <h:form id="pg2">
        <h:graphicImage width="100" id="img2"
            value="images/trans?y=#{Math.random()}" onclick="eval(bb)">
        </h:graphicImage>
    </h:form>
</h:panelGroup>
<h:messages></h:messages>
<hr />

（不要对 #{Math.random()} 感到困惑。它起作用只是因为我有一个名为 "Math" 的 bean。）

我正在使用 tomcat 8 和 jsf 版本 2.2.8。

Answer 1

尝试将 display: inline-block 样式添加到第二种形式

如您在 here 中所见，图像需要位于包含此 css

的 div 中

Answer 2

你能试试这个吗

 <h:panelGrid columns="2" width="210px" columnClasses="small, small">
     <h:panelGroup id="a1">
       <h:form>
        <h:commandLink>
           <h:graphicImage width="100" id="img1"
            value="images/img?r=1#{Math.random()}" alt="not found">
          </h:graphicImage>
          <f:ajax render="@this :pg2"></f:ajax>
        </h:commandLink>
     </h:form>
    </h:panelGroup>
    <h:panelGroup id="b1">
     <h:form id="pg2">
       <h:graphicImage width="100" id="img2"
        value="images/trans?y=#{Math.random()}" onclick="eval(bb)">
       </h:graphicImage>
     </h:form>
    </h:panelGroup>
  </h:panelGrid>

与 CSS:

 .small{
      width:102px;
      vertical-align: text-top;
 }

让我们知道

编辑。已将 div 更改为 panelGroup

如何使用 JSF 水平对齐图像

How to align images horizontally with JSF

jsf

jsf-2.2