0

JSFページにdivレイヤーがあります：

<p:outputPanel id="outputComponent">
    <div style="position: absolute; background-color: black; left: 350px; top: 0px; width: 700px; padding: 10px; border-radius: 6px;">

        <div class="container">
            Component Profile
        </div>
        <br/>
        <!-- <h:outputText value="#{TreeViewController.initComponent()}" /> -->

        <table>
            <col width="280"/><col width="130"/>

            <ui:repeat var="ud" value="#{TreeViewController.componentData}">

                <tr>
                    <td>Component ID</td>
                    <td>
                        <h:outputText value="#{ud.componentStatsID}"/>
                    </td>
                </tr>
                <tr>
                    <td>Name</td>
                    <td>
                        <h:outputText value="#{ud.componentName}"/>
                    </td>
                </tr>

            </ui:repeat>
        </table>

    </div>
</p:outputPanel>

ページをスクロールしても、この div を常にディスプレイの中央に表示する方法に興味がありますか?

4

1 に答える 1

2

positionプロパティ値を使用する必要がありますfixed。垂直方向と水平方向の両方の中央に配置するかどうかはわかりませんでしたが、このソリューションは両方で機能します. top: 50%div の高さに応じて、幅を好きなように変更します。

CSS

.static {
  position: fixed;
  background-color: #000;
  width: 50%;
  top: 50%;
  left: 25%;
  right: 25%;
  padding: 10px;
  border-radius: 6px 6px 6px 6px;
  color: #fff;
}

div に静的クラスを適用し、以下を削除します。style="position: absolute; background-color: black; left: 350px; top: 0px; width: 700px; padding: 10px; border-radius: 6px;"

Jsfiddle: http://jsfiddle.net/HwHUS/1/

于 2013-02-11T19:26:50.250 に答える