How can I centre a panel box?

Question

I have created a login page using Oracle jDeveloper. Currently, it appears in the top left corner. How can I centre this page, along both x and y axis (place the panel box in the middle)? This is the screenshot and the code is shown below.

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html>
<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<af:document title="untitled1.jsf" id="d1">

<af:form id="f1">
<af:panelBox text="Login"
                     inlineStyle="width:260px;" id="pb1">
                             <table>
                <tbody>
                  <tr>
                    <td>
                      Username
                    </td>
                    <td>
                      <input type="text" id="j_username" name="j_username"/>
                    </td>
                  </tr>
                  <tr>
                    <td>
                        Password
                    </td>
                    <td>
                      <input type="password" id="j_password"
                             name="j_password"/>
                    </td>
                  </tr>
                  <tr>
                    <td align="right" colspan="2">
                      <input id="login" type="submit" value="Log In"  />
                    </td>
                  </tr>
                </tbody>
              </table>
    </af:panelBox>
    </af:form>

        </af:document>
    </f:view>

score 0 · Answer 1 · answered Oct 20 '15 at 15:51

0

Easiest is to use a PanelGridlayout manager, set the rows and columns and put the panel box in the appropriate cell. Proper centering and aligning in ADF Faces is done with layout managers, not hardcoding HTML. Start here. This tutorial may help, and this.

answered Oct 20 '15 at 15:51

Joe

3,302
1
12
11

Well, ADF Faces is a higher level of abstraction and *framework* more than just HTML and CSS. We use ADF Faces because it does so much more for us and we do not *have* to deal with low-level CSS as much. We reserve CSS for special styling, fonts, colors, and themes. In ADF Faces, the proper way to do what he wants is as I have said - use a layout manager to center it for you. Otherwise, don't use ADF Faces and you can hard code the HTML and CSS all you want. Remember, poster started by saying he is using JDeveloper/ADF Faces. I am answering the question and intent asked. – Joe Oct 20 '15 at 21:52
I'm not here to compare HTJML/CSS and a framework like ADF Faces. I trust you understand the difference between the two. Perhaps this will help: http://docs.oracle.com/cd/E16764_01/web.1111/b31973/af_skin.htm and https://community.oracle.com/docs/DOC-890831 – Joe Oct 20 '15 at 21:57
Wooowww… sorry. Peace – Kukeltje Oct 20 '15 at 22:00

Anand Dwivedi · Answer 2 · 2015-10-19T15:21:14.490

There is a tag Called <center> that will align all data into center .The HTML Center Element<center> is a block-level element that can contain paragraphs and other block-level and inline elements. The entire content of this element is centered horizontally within its containing element .Add a divwith an explicit width and margin: 0 auto.and Use Some CSS

Check updated Code

<html>
<head>
<body>
<af:form id="f1">
<af:panelBox text="Login"
                     inlineStyle="width:260px;" id="pb1">
<center>
<div style="width: 500px; margin: 200px auto 0 auto;">
                             <table>
                <tbody>
                  <tr>
                    <td>
                      Username
                    </td>
                    <td>
                      <input type="text" id="j_username" name="j_username"/>
                    </td>
                  </tr>
                  <tr>
                    <td>
                        Password
                    </td>
                    <td>
                      <input type="password" id="j_password"
                             name="j_password"/>
                    </td>
                  </tr>
                  <tr>
                    <td align="right" colspan="2">
                      <input id="login" type="submit" value="Log In"  />
                    </td>
                  </tr>
                </tbody>
              </table>
<center>
</div>
    </af:panelBox>
    </af:form>


</body>
</head>
</html>

Hope it helps . happy to help

uhhhh... `head` around `body`? and ``? That is a tag that is [deprecated for several years now](http://stackoverflow.com/questions/1798817/why-is-the-center-tag-deprecated-in-html) Just like `` and ``, — Kukeltje, Oct 19 '15 at 15:54
@Kukeltje: deprecation of `` and `` was indeed planned but was at last moment cancelled. [It's still in HTML5](https://html.spec.whatwg.org/multipage/semantics.html). The `` has become a defacto "icon" element and the `` should basically only be used when you've run out of `` tags. — BalusC, Oct 20 '15 at 06:56
Nonetheless, a fat downvote for [plagiarism](http://meta.stackexchange.com/questions/160077/users-are-calling-me-a-plagiarist-what-do-i-do) and recommending a since 1998 deprecated approach. — BalusC, Oct 20 '15 at 07:05

How can I centre a panel box?

2 Answers2