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（）}感到困惑。这只是因为我有一个名为＆＃34; Math＆＃34;的豆。）

我使用的是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水平对齐图像

2 个答案: