Bootstrap 4: не в состоянии вертикально и отзывчиво центрировать изображение - PullRequest
Новая
       0

Bootstrap 4: не в состоянии вертикально и отзывчиво центрировать изображение

0 голосов
/ 01 октября 2018

Я работаю над приложением Angular 6, и в данный момент я пытаюсь центрировать изображение на главном экране, но независимо от того, какое решение я пробую (из тех, что я нашел здесь), оно всегда отображается рядом сверхняя панель навигации и не по центру.

Я безуспешно пробовал все решения, найденные в следующем посте в app.component.html, всегда получаю более или менее тот же результат, что и на рисунке:

Вертикальный центр выравнивания в Bootstrap 4

Пожалуйста, помогите мне центрировать вертикально домашнее изображение (или текст, или что я выберу), не затрагивая остальные страницы, которые используютшаблон app.component.html.

index.html: 

<!doctype html>
<html lang="en">

<head>
    <title>WFRH</title>
    <base href="/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <app>Loading...</app>
</body>

</html>

app.component.html: 

<app-nav></app-nav>
<div class="jumbotron">
    <div class="container d-flex h-100" style="border: 1px solid red">
        <div class="row justify-content-center align-self-center text-center">
            <div class="col-sm-12">
                <!-- <router-outlet></router-outlet> -->
                I'm centered...
            </div>
        </div>
    </div>
</div>
<app-footer></app-footer>

home.component.html: 

    <img src="../../../assets/cirsa_home.png" class="img-fluid" />

nav.component.html: 

<nav class="navbar navbar-expand-sm bg-dark navbar-dark pb-0">
  <div class="container pb-1">
    <!-- Brand -->
    <a class="navbar-brand" href="{{xxxApp.xxxWebsiteUrl}}" target="_blank">
      <img src="../../../assets/app_logo.png" />
    </a>

    <!-- Menu Toggler -->
    <button style="margin-left: 10px;" class="navbar-toggler order-last order-sm-0" type="button" data-toggle="collapse"
      data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Navbar links -->
    <div class="collapse navbar-collapse order-last order-sm-0" id="collapsibleNavbar" *ngIf="(isLoggedIn | async)">
      <ul class="navbar-nav pull-left">

        <li class="nav-item text-left hover-inverse">
          <a class="nav-link text-light" href="#">
            <i class="fa fa-home"></i>
            <label [translate]="'wfrh_nav_home' | translate">Inicio</label>
          </a>
        </li>

        <li class="nav-item text-left dropdown hover-inverse">
          <a class="nav-link dropdown-toggle text-light" href="#" id="navbardrop" data-toggle="dropdown">
            <i class="fa fa-edit"></i>
            <label [translate]="'wfrh_nav_requests' | translate">Solicitudes</label>
          </a>
          <div class="dropdown-menu bg-dark border-0 hover-inverse">
            <a [routerLink]="['/vacancy-form']" class="dropdown-item text-light" href="#">
              <label [translate]="'wfrh_nav_fillvacancy' | translate">APC Cubrir vacante</label>
            </a>
            <a class="dropdown-item text-light" href="#">
              <label [translate]="'wfrh_nav_leave' | translate">APC Excedencia</label>
            </a>
            <a class="dropdown-item text-light" href="#">
              <label [translate]="'wfrh_nav_lactation' | translate">APC Lactancia</label>
            </a>
            <a class="dropdown-item text-light" href="#">
              <label [translate]="'wfrh_nav_maternity' | translate">APC Maternidad</label>
            </a>
            <a class="dropdown-item text-light" href="#">
              <label [translate]="'wfrh_nav_newcreationdailycasinos' | translate">APC Nueva Creación Diarios Casinos</label>
            </a>
            <a class="dropdown-item text-light" href="#">
              <label [translate]="'wfrh_nav_newcreation' | translate">APC Nueva Creación</label>
            </a>
            <a class="dropdown-item text-light" href="#">
              <label [translate]="'wfrh_nav_substitution' | translate">APC Sustitución IT</label>
            </a>
            <a class="dropdown-item text-light" href="#">
              <label [translate]="'wfrh_nav_holidays' | translate">APC Vacaciones</label>
            </a>
            <a class="dropdown-item text-light" href="#">
              <label [translate]="'wfrh_nav_changeofconditions' | translate">CDC Cambio Condiciones</label>
            </a>
            <a class="dropdown-item text-light" href="#">
              <label [translate]="'wfrh_nav_evaluationsheet' | translate">HEV Hoja Evaluación</label>
            </a>
            <a class="dropdown-item text-light" href="#">
              <label [translate]="'wfrh_nav_balanceandsettlement' | translate">PSF Saldo y Finiquito</label>
            </a>
          </div>
        </li>

        <li class="nav-item text-left hover-inverse">
          <a [routerLink]="['/login']" class="nav-link text-light">
            <i class="fa fa-sign-out"></i>
            <label [translate]="'wfrh_nav_logoff' | translate">Cerrar sesión</label>
          </a>
        </li>

      </ul>
    </div>

    <!-- Email send tester -->
    <!-- <button class="btn-primary" (click)="emailMe()">Send Test Email To Me</button>&nbsp; -->

    <!-- User menu -->
    <!-- <div class="dropdown d-flex flex-grow-1" style="margin-right: 10px;" *ngIf="(isLoggedIn | async)">
        <button type="button" class="btn btn-success dropdown-toggle ml-auto" data-toggle="dropdown"  id="userDropdown">
          {{userName | async}}
        </button>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
          <div class="dropdown-divider"></div>
          <a [routerLink]="['/login']" class="dropdown-item">Logout</a>
        </div>
      </div> -->

    <!-- Language Selector -->
    <select class="selectpicker ml-auto" data-width="65px" id="langSelect" data-style="btn-primary" #langSelect
      (change)="languageChange(langSelect.value)">
      <option class="flag-icon flag-icon-squared flag-icon-{{xxxApp.countryInfo[i].ISO3166_2Letter}}" style="margin-bottom: 5px; width: 65px;"
        *ngFor="let lang of xxxApp.translate.getLangs(); let i = index" [value]="lang" [selected]="lang === xxxApp.translate.currentLang">
        <span class="flag-icon flag-icon-squared flag-icon-{{xxxApp.countryInfo[i].ISO3166_2Letter}}"></span>
      </option>
    </select>
  </div>
</nav>

<nav class="navbar navbar-expand-md bg-dark navbar-dark pt-0 pb-0">
  <div class="container pt-0 pb-1">
    <small class="username">
      {{userName | async}}
    </small>
  </div>
</nav>

styles.css: 

@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.css";

html, body {
    height: 100%;
}

Ответы [ 2 ]

0 голосов
/ 02 октября 2018

После исследования и проб и ошибок я нашел решение, которое работает.Я надеюсь, что это будет полезно для всех остальных с этой проблемой.

Основной шаблон моего приложения состоит из горизонтального заголовка navbar => content => горизонтального нижнего колонтитула navbar, и я установил нижний колонтитул с фиксированной высотой 40 пикселей, поэтому я используюОтрицательное поле 40px для домашнего изображения, поэтому оно центрировано относительно содержимого div, а не всего экрана (мне не очень нравится этот подход - я имею в виду использование отрицательных полей - но это работает):

app.component.html (основная структура): 

<div class="main">
    <div class="row header m-0 p-0">
        <div class="col-12 m-0 p-0">
            <app-nav></app-nav>
        </div>
    </div>
    <div class="row content m-0 p-0">
        <router-outlet></router-outlet>
    </div>
    <div class="row footer">
        <app-footer></app-footer>
    </div>
</div>

home.component.html: 

<div style="margin-top: -40px !important;" class="pl-5 pr-5">
    <img src="../../../assets/img_home.png" class="img-fluid" />
</div>

styles.css: 

html, body {
  height: 100%;
}

.main {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.main .row.header {
  flex: 0 1 auto;
}

.main .row.content {
  flex: 1 1 auto;
}

.main .row.footer {
  flex: 0 1 auto;
}

И так жекак выглядит домашний экран:

And so is how the home screen looks

0 голосов
/ 01 октября 2018

Возможно, вы неправильно поняли решение, приведенное в посте вертикального выравнивания.Чтобы иметь возможность выровнять элемент по вертикали в зависимости от его родителя, вы должны установить высоту родителя (именно поэтому вы видите рост: 100% в их примере), но если, как в вашем html, у вас много разных родителей, нетолько родитель должен иметь реквизит 100% высоты, но также и реквизиты потомков

CSS Пример: 

@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.css";

html, body, div {
 height: 100%;
}

HTML Пример: 

<body>
     <div>
        <image>the centered element</image>
     </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...