Как мне сделать мое загрузочное изображение центрированным на моей странице? - PullRequest
Новая
       26

Как мне сделать мое загрузочное изображение центрированным на моей странице?

0 голосов
/ 27 декабря 2018

У меня есть веб-приложение, которое использует jsf-2 и richfaces.Я хотел поместить маску загрузки поверх страницы, ожидая ответов ajax (при нажатии на пункты меню), поэтому я добавил изображение загрузки в шаблон, который также определяет пункты меню: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:c="http://java.sun.com/jstl/core"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:a4j="http://richfaces.org/a4j"
    template="/templates/main-template.xhtml">
    <ui:define name="html_head">
        <link rel="stylesheet" type="text/css" media="all"
            href="${request.contextPath}/resources/css/main.css" />
    </ui:define>

    <ui:define name="title">Title</ui:define>

    <ui:define name="top_menu">
        <li id="product_tab" class="process-a-tab"><h:commandLink
                action="#{AViewController.doView()}" onclick="document.getElementById('loading').style.display='block'">#{msgApp.a_tab}</h:commandLink>
        </li>
        <li id="mgmt_unit_tab" class="process-a-tab"><h:commandLink
                action="#{BViewController.doView()}" onclick="document.getElementById('loading').style.display='block'">#{msgApp.b_tab}</h:commandLink>
        </li>
        <img id="loading" src="resources/img/loading.gif" style="display:none" />

    </ui:define>

    <ui:define name="head">
    </ui:define>

    <ui:define name="footer">
        <h:outputText value="Application v 4.0" />
    </ui:define>
</ui:composition>

Cssдля #loading: 

#loading {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9999;;
  opacity: 0.4;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
}

Шаблон меню, приведенный выше, затем включается в другие страницы: 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:c="http://java.sun.com/jstl/core"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    template="/templates/page-template.xhtml">

    <ui:define name="title">#{msgApp.title}</ui:define>

    <ui:define name="breadcrumb">
        <ui:include src="bread_crumb.xhtml" />
    </ui:define>

    <ui:define name="amount">
        <ui:include src="amount.xhtml" />
    </ui:define>

    <ui:define name="subTotal">
        <ui:include src="sub_total.xhtml" />
    </ui:define>

    <ui:define name="total">
        <ui:include src="total.xhtml" />
    </ui:define>

    <ui:define name="content">
        <ui:include src="content.xhtml" />
    </ui:define>
</ui:composition>

Проблема, с которой я столкнулся, заключается в том, что изображение вместо загрузки центрируется настраница, центрирована на окружающем <ui:define>, и это делает его едва видимым.

Как мне отцентрировать его на странице?

Ответы [ 2 ]

0 голосов
/ 27 декабря 2018

Лично у меня обычно есть оверлейный элемент, который position: fixed; и width: 100%; height: 100vh;.Тогда сделайте это flexbox с justify-content: center; align-items: center;.Затем поместите свое изображение загрузки в этот элемент.Элемент покрывает весь видовой экран, и ваше изображение будет в центре этого.

0 голосов
/ 27 декабря 2018

Используйте css flexbox: 

  display: flex;
  align-items: center;
  justify-content: center;
...