Почему это вертикальное выравнивание: середина не работает в JQuery Mobile

Я пытаюсь поместить набор значков в середину экрана, ниже приведен код:

 <div data-role="content" class="ui-content ui-body-a" style="vertical-align: middle" data-theme="a">

        <fieldset class="ui-grid-a icon-set" style="vertical-align: middle"  data-theme="b">

           <div class="ui-block-a center" style="vertical-align: middle">
               <a href="test">
                <div>
                <img src="css/images/test5.png" style="width: 80px;height: 80px"/>
                </div>
                <div>
                    Login
                </div>
                </a>

           </div>

           <div class="ui-block-b center">
                  <a href="#settings" data-transition='slide'>
                    <div>   <img src="css/images/test4.png" style="width: 80px;height: 80px"/></div>
                    <div>Settings</div>
                  </a>

           </div>

             <div class="ui-block-a center">

                  <a href="test">
                    <div>   <img src="css/images/test2.png" style="width: 80px;height: 80px"/></div>
                    <div>Aboutus</div>
                    </a>

              </div>

               <div class="ui-block-b center">

                  <a href="test">
                    <div>   <img src="css/images/test1.png" style="width: 80px;height: 80px"/></div>
                    <div>Contact Us</div>
                    </a>

           </div>

       </fieldset>
        </div>

vertical-alignment css jquery-mobile
person Suave Nti    schedule 30.08.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

выравнивание по вертикали не работает, как ожидало большинство людей — это свойство доступно только для таблиц или элементов, которые имеют стиль table-cell или аналогичный (http://www.w3schools.com/cssref/pr_class_display.asp)

вам также нужно будет указать размер элемента DIV по умолчанию, чтобы это работало... проверьте этот пример JSBin и этот ответ StackOverflow для получения дополнительной информации

person Zathrus Writer    schedule 30.08.2012

arrow_upward
0
arrow_downward

Сделай это:

<div data-role="content" class="ui-content ui-body-a" style="text-align: center;" data-theme="a">

а затем это для любого div, который вы хотите центрировать:

style="margin:0 auto;"
person Zigfreed    schedule 30.08.2012