Bootstrap 4: Not being able to vertically -and responsively- center an image

Question

I'm working on an Angular 6 app and at this moment I'm trying to center an image on home screen but no matter which solution I try (from the ones I've found here) it always shows immediately next to top navbar and not vertically centered.

I tried all solutions found in this next post in app.component.html with no luck, always get the more or less the same result as can be seen in the picture:

Vertical Align Center in Bootstrap 4

Please, help me in centering vertically home image (or text or whatever I choose to put) without affecting the rest of pages that use the app.component.html template.

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%;
}

score 0 · Answer 1 · answered Oct 01 '18 at 15:05

0

You probably missunderstood the solution given in the vertical align post. To be able to align vertically an item depending on its parent, you have to set the parent's height (that is why you see body height:100% in their example) but if, like in your html, you have many different parents, not only the parent has to have the 100% height prop, but also the children props

CSS Example :

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

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

HTML Example :

<body>
     <div>
        <image>the centered element</image>
     </div>
</body>

answered Oct 01 '18 at 15:05

Mathieu

21
2

Why am I being downvoted? What is wront with my question? I never understand why some people just downvote without helping and without explanations of why... I was doing a lot of research before asking and tried several things is mentioned in other posts. – Diego Perez Oct 02 '18 at 06:28
Thanks for answer @Mathiew, maybe you are right, but I tried several things but in the end I have found a solution to my problem which I'll post as an answer. – Diego Perez Oct 02 '18 at 06:33

score 0 · Answer 2 · answered Oct 02 '18 at 06:45

After researching and doing a lot of trial and error I came up with a solution that works. I hope it is useful for anyone else with this issue.

My app main template consists on an horizontal navbar header => content => horizontal navbar footer and I set a fixed height footer of 40 px so then I use a negative margin of 40px for home image so it is centered respect content div and not the whole screen (I don't like this approach very much -I mean, using negative margins- but it works):

app.component.html (the main structure):

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

After long testing I found that this approach is not fully responsive. In mobile after you hit the menu toggler icon and the menu pops down the menu overlaps with current screen, given the fact that without this approach the default behaviour is that the coontent moves down with the menu :s so still no fully responsive crossbrowser solution. — Diego Perez, Oct 02 '18 at 10:15

Bootstrap 4: Not being able to vertically -and responsively- center an image

2 Answers2