Struggling with vertical and responsive image centering in Bootstrap 4?

Question

Struggling with vertical and responsive image centering in Bootstrap 4?

I'm currently developing an Angular 6 app and facing an issue with centering an image on the home screen. Despite trying various solutions from this platform, the image always ends up positioned right next to the top navbar instead of being vertically centered.

Even after attempting all the recommendations provided in the post linked below, the result remains similar to what is depicted in the accompanying image:

Vertical Align Center in Bootstrap 4

I kindly request assistance in properly aligning the home image (or any other content) vertically while ensuring that the layout of other pages using the app.component.html template remains unaffected.

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">
    <a class="navbar-brand" href="{{xxxApp.xxxWebsiteUrl}}" target="_blank">
      <img src="../../../assets/app_logo.png" />
    </a>

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

    <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">Home</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">Requests</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">Fill Vacancy</label>
            </a>
            <a class="dropdown-item text-light" href="#">
              <label [translate]="'wfrh_nav_leave' | translate">Leave</label>
            </a>
            // Remaining dropdown items...
          </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">Logoff</label>
          </a>
        </li>

      </ul>
    </div>

    // Remaining navbar elements...
  
  </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%;
}

html css bootstrap-4

Answer 1

Answer №1

It seems there may have been a misunderstanding in the explanation provided for vertical alignment. To align an item vertically based on its parent, the parent's height must be set (as seen in the example with body height:100%), but in cases where there are multiple different parents in your HTML, not only the parent needs to have the height property set to 100%, but also the children elements.

Here is a CSS example:

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

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

And here is an HTML example:

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

Answer 2

It seems there may have been a misunderstanding in the explanation provided for vertical alignment. To align an item vertically based on its parent, the parent's height must be set (as seen in the example with body height:100%), but in cases where there are multiple different parents in your HTML, not only the parent needs to have the height property set to 100%, but also the children elements.

Here is a CSS example:

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

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

And here is an HTML example:

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

Answer 3

Answer №2

After extensive research and experimentation, I finally found a solution that effectively resolves the issue at hand. Hopefully, my discovery will prove beneficial to others facing the same challenge.

In my application's main template, the layout comprises a horizontal navigation bar in the header, followed by the content section, and a horizontal navbar in the footer. To achieve a centered alignment within the content div without spanning the entire screen, I opted to set a fixed height of 40px for the footer and applied a negative margin of 40px to the home image. While using negative margins may not be my preferred approach, it certainly gets the job done:

app.component.html (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;
}

Here is a glimpse of how the home screen appears after implementing the adjustments:

https://i.sstatic.net/IXN5X.png

Answer 4

After extensive research and experimentation, I finally found a solution that effectively resolves the issue at hand. Hopefully, my discovery will prove beneficial to others facing the same challenge.

In my application's main template, the layout comprises a horizontal navigation bar in the header, followed by the content section, and a horizontal navbar in the footer. To achieve a centered alignment within the content div without spanning the entire screen, I opted to set a fixed height of 40px for the footer and applied a negative margin of 40px to the home image. While using negative margins may not be my preferred approach, it certainly gets the job done:

app.component.html (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;
}

Here is a glimpse of how the home screen appears after implementing the adjustments:

https://i.sstatic.net/IXN5X.png

Struggling with vertical and responsive image centering in Bootstrap 4?

Answer №1

Answer №2

Similar questions

How to target an ID containing a dot using jQuery

Always ensure that only one div is visible at a time

Manipulating layout with html5 VIDEO controls

changing html numbered list to xml format

The http url on an iPad in the src attribute of an HTML 5 video tag is malfunctioning

What is the best way to add rounded corners to tables in Bootstrap 3?

Updating information without the need for a page refresh

Prevent the crawling of HTML segments by utilizing HTML-XSL parsing techniques

Overriding Bootstrap's Sass variables

Divide Footer Information into Two Sections: Left and Right

Sending data to another page by selecting a list item

What is the best way to sequentially process data column by column and incorporate them into a three-dimensional model using three.js?

The utilization of media within the meta in Next.js is not allowed

Guide on implementing gradient animation effects in a React component

What are the steps to include media queries?

Ways to unlock all the information windows in Google Maps

Using javascript to locate and substitute a word divided among multiple tags - a step-by-step guide

jQuery effects failing to run properly in Internet Explorer

Using jQuery functions to disable adding or removing classes with a click event

Connecting an HTML box to a JavaScript function for the desired outcome: How to do it?