Align the image vertically within a column with a height of 100%

I'm currently struggling to vertically center an image within a Bootstrap 4 layout. The navbar has a fixed height of 100px, and the columns also need to have a height of 100px due to their background styling.

Despite using the align-items-center class, I am unable to achieve vertical alignment as the image remains at the top.

.navbar-brand {
  height: 100px;
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: 1rem;
  background-color: rgba(0, 0, 0, .25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar {
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
  background-color: #3366cc;
  height: 100px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar sticky-top p-0">
  <div class="container-fluid h-100" style="border-bottom: 1px solid rgb(192, 192, 192); height:100px;">
    <div class="row justify-content-between align-items-center h-100" style="width:100vw;">
      <div class="col-2 col-xxxl-1 h-100" style="background:white;">
        <img class="img-fluid" style="max-height: 100px" src="https://via.placeholder.com/350x150" alt="" />
      </div>
      <div class="col-2 col-xxxl-1 text-center" style="background: white;height: 100%;">
        <p class="no-wrap"><a href=""> Sign out</a></p>
      </div>
    </div>
  </div>
</nav>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

It seems like I have found the solution you were searching for:

1) To center the content, simply remove the h-100 class from the inner div.

2) Another way to achieve the desired outcome is by altering the markup - introduce a new div with the class col-8 which will act as the blue middle section.

.navbar-brand {
  height: 100px;
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: 1rem;
  background-color: rgba(0, 0, 0, .25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar {
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
  height: 100px;
}

.middle-nav {
  background-color: #3366cc;
  width: 100%;
  height: 100px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar sticky-top p-0">
  <div class="container-fluid h-100" style="border-bottom: 1px solid rgb(192, 192, 192); height:100px;">
    <div class="row justify-content-between align-items-center" style="width:100vw;">
      <div class="col-2 col-xxxl-1 h-100" style="background: white;">

        <img class="img-fluid" style="max-height: 100px" src="https://via.placeholder.com/350x150" alt="" />
      </div>
      <div class="col-8 middle-nav"></div>
      <div class="col-2 col-xxxl-1 text-center" style="background: white;height: 100%;">
        <p class="no-wrap"><a href=""> Sign out</a></p>
      </div>
    </div>
  </div>
</nav>

Answer №2

It seems like the align-items-center class is not clearly defined in your code, making it difficult to determine its purpose.

To center the image, you can try adding the align-items-center class to your CSS along with a text-align: center; property.

.navbar-brand {
  height: 100px;
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: 1rem;
  background-color: rgba(0, 0, 0, .25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar {
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
  background-color: #3366cc;
  height: 100px;
}

.align-items-center {
  text-align: center; 
}
<nav class="navbar sticky-top p-0">
  <div class="container-fluid h-100" style="border-bottom: 1px solid rgb(192, 192, 192); height:100px;">
    <div class="row justify-content-between align-items-center h-100" style="width:100vw;">
      <div class="col-2 col-xxxl-1 h-100" style="background:white;">
        <img class="img-fluid" style="max-height: 100px" src="https://via.placeholder.com/350x150" alt="" />
      </div>
      <div class="col-2 col-xxxl-1 text-center" style="background: white;height: 100%;">
        <p class="no-wrap"><a href=""> Sign out</a></p>
      </div>
    </div>
  </div>
</nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Embed a FLV video within a jQuery tooltip

My current setup includes a line of code like this: <img title="FLV Video goes here" class="tooltip" src="/images/icon-question.png" alt="questions" width="12" height="12" border="0" /> When hovering over the image, the text in the title attribute ...

jqueryhtmljquery-ui

Using the ng-show directive in AngularJS allows you to pass elements in

Web Development <li ng-show="sample($event)" TestLi</li> JavaScript Functionality $scope.sample = function($event){ //$event is undefined //perform some action } I have experimented with passing the HTML element using ng-click, but I am curio ...

htmlangularjseventselement

Changing the color of the collapsed icon for accordion buttons in Bootstrap 5

I've been attempting to alter the color of Bootstrap 5's accordion's "accordion-button" when it's collapsed. I tested the following code, but it only changes the background and not the icon color of the button. .accordion-but ...

cssbootstrap-5bootstrap-icons

The border should not start at the left of the page; instead, I would like it to begin at the letter "T" in "Tech."

I am having an issue with the bottom border starting from the extreme left of the page. I want it to start from the letter "T" in Tech instead. #page-container { width: 1250px; margin: 0 auto; } h2 { font-weight: normal; padding-left: 15px; ...

htmlcss

What is the best method for overriding the CSS rule for input[type=checkbox]?

My checkmark follows this rule: input[type=checkbox] { display: none; } I tried to change it like this: <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" style="display:block;& ...

htmlcssbootstrap-4

A small space underneath the <a> element nested within a <li> tag within a navigation bar

As a new programmer, I am currently working on creating a navbar. However, I have encountered an issue where there are small gaps underneath the user when my cursor hovers over it. There is a white gap under the user element. I expect that the hover back ...

htmlcss

I am seeking guidance on how to update the HTML content being viewed in the browser when a user changes the selected option within a <select> element in ASP.NET

Hello, I'm just starting to learn about web development and ASP.Net. Can anyone help me figure out how to dynamically change the HTML content displayed in the browser when the user selects a different option from a <select> element? @*DropDown: ...

htmlasp.netasp.net-mvcrazor

The navigation bar toggle feature seems to be malfunctioning in Bootstrap 5

I've encountered a problem with the navbar while using Bootstrap 5.0.2 dist. The toggler on the navbar expands and collapses, but it doesn't roll back after clicking the bar icon. I have implemented the fixed-top navbar from the Bootstrap 5 examp ...

htmltwitter-bootstrapnavbartogglebuttonbootstrap-5

What is the best way to choose a child element that has been clicked using jQuery?

How can I make only the child of the clicked element slideToggle? I tried implementing a solution, but it ended up sliding all divs with the .description class. Can anyone provide some guidance? HTML: <div id="container"> <div class="row"> ...

jqueryhtmlcss

Issue with Reactstrap Bootstrap Navbar functionality within a React application

After using 'create react-app' to create a new React app, I decided to include a navbar from Reactstrap. Following the instructions on the Reactstrap website, I copied and pasted the code for the navbar component: import React from 'react&a ...

reactjsbootstrap-4navbarcreate-react-appreactstrap

Difficulty in dynamically updating custom attributes data in a popover

I am attempting to dynamically insert text into a Bootstrap 3 Popover data-content="" on this demo. My goal is to update the text in the data-content="" attribute by clicking different buttons. I have tried doing this using the following code: $("#poper") ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3

Enhance the Bootstrap Sass by integrating a color scheme that seamlessly complements all elements such as backgrounds, text, and borders throughout the

Hi there, I'm having an issue with Bootstrap and Sass when trying to add new colors to my theme map. Can anyone help me figure out what I might be doing wrong? Thank you in advance. I've been attempting to include a new color in the theme-colo ...

csssassbootstrap-5theming

The bootstrap function for showing the modal with the ID "myModal" is malfunctioning

As someone who is just getting started with PHP and Bootstrap, I am running into an issue where the modal doesn't seem to work when triggered using the .modal method. Here is the PHP code I am using: if ($show_login_modal) { echo " <scr ...

javascriptphpbootstrap-4bootstrap-modal

Attempting to relocate various containers

My task involves handling a group of randomly placed boxes on a webpage, each painted in random colors. I am currently attempting to enable their movement from one location to another. Despite being a seemingly simple task, my lack of familiarity with mous ...

javascripthtml

Trouble extracting data with XPath query in Python

Currently, I am attempting to extract specific information from this particular webpage. However, there are three crucial pieces of data that have proven to be quite elusive. Firstly, I am struggling to retrieve the grade, denoted by '5.6' next ...

jquerypythonhtmlcssxpath

Passing parameters from an HTML form using PHP

I have a background in C# and am still relatively new to PHP. I have an HTML form that submits its values to the PHP file below, but for some reason, the values are not being set. Can you help me identify what I'm doing wrong? <?php include(' ...

phphtml

Develop a selection tool based on certain column information - utilizing JavaScript

I'm currently working on a table with a large amount of data, and I'd like to implement a select option for filtering. While I have successfully added the filter with the select element, my concern is how to dynamically populate the options witho ...

javascriptjqueryhtml

How can AngularJS utilize ng-repeat and ng-bind-html to display arrays of HTML strings?

I'm currently attempting to display HTML strings from an array of HTML strings in my AngularJS project. As a newcomer to AngularJS, I have been trying to follow the examples provided on the official AngularJS website, but I am struggling to find a sui ...

javascripthtmlangularjsangularjs-ng-repeatng-bind-html

Developing a quiz using jQuery to load and save quiz options

code: http://jsfiddle.net/HB8h9/7/ <div id="tab-2" class="tab-content"> <label for="tfq" title="Enter a true or false question"> Add a Multiple Choice Question </label> <br /> <textarea name ...

javascripthtmldrop-down-menujquery

Out-of-sync movement in animated characters

Looking for some assistance with my page coding. I have a scenario where two stars are moving around a button, simulating an animation by incrementing the CSS properties top and left. Initially, everything appears fine and they move synchronously. However, ...

javascripthtmlcssanimation