vertical centering in gwt

问题

how to vertical centering in gwt by using vertical panel.. or pls sugest me is there any way for doing vertical cetering

回答1:

If you want to directly use the VerticalPanel from code, you need to use the setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE)

You can also use the UiBinder approach

<g:VerticalPanel verticalAlignment='ALIGN_MIDDLE' horizontalAlignment='ALIGN_CENTER' width="100%" height="500px">
  <g:cell></g:cell>
</g:VerticalPanel>

Take a look to DevGuideUiPanels for examples and documentation

回答2:

I can give you an example on how we did it with css (to implement a popup like behaviour).

If you google for it there are dozens of solutions on how to achieve vertical centering. This example worked for us, so no guarantee if it's of any help for you.

<!DOCTYPE html>
<html>
  <head>
    <style>
        * {
            margin: 0 auto; 
        }

        .popup {
            border-color:#ff4f00;
            border-style:solid;
            border-width:5px;
            background-color: #ffffff;
            text-align: left;
        }

        #wrapper, #container {
            height: 150px;
            width: 550px;
        }

        #wrapper {
            bottom: 50%;
            right: 50%;
            position:
            absolute;
        }

        #container {
            left: 50%;
            position: relative;
            top: 50%;
        }
    </style>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>vertical centering</title>
  </head>
  <body>
    <div style="width: 965px; height: 515px;"></div>
    <div id="wrapper">
        <div class="popup" id="container">
            some content
        </div>
    </div>
  </body>
</html>

EDIT: check also this question out.

来源：https://stackoverflow.com/questions/4192862/vertical-centering-in-gwt

标签

html

css

gwt