вертикальное центрирование в gwt - PullRequest
3 голосов
/ 16 ноября 2010

как вертикальное центрирование в gwt с помощью вертикальной панели .. или, пожалуйста, есть ли способ сделать вертикальное церингирование

Ответы [ 2 ]

6 голосов
/ 16 ноября 2010

Если вы хотите напрямую использовать VerticalPanel из кода, вам нужно использовать setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE)

. Вы также можете использовать подход UiBinder

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

Посмотрите на DevGuideUiPanels для примеров и документации

1 голос
/ 16 ноября 2010

Я могу дать вам пример того, как мы сделали это с помощью css (для реализации поведения, подобного всплывающему меню).

Если вы заглянете в Google, есть множество решений о том, как добиться вертикального центрирования. Этот пример сработал для нас, поэтому нет никакой гарантии, что он вам поможет.

<!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>

РЕДАКТИРОВАТЬ: проверьте также этот вопрос out.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...