The vertical alignment feature seems to be malfunctioning in Bootstrap 4

My goal is to center multiple images within their respective divs, but I am facing issues with vertical alignment not working as intended. Even the CSS classes d-flex justify-content-end and text-center are failing to align the icons side by side. I need the icons to be centered within their divs, so I utilized the align-items-center class for this purpose. However, the icons remain fixed at the top center instead of being perfectly centered. Is there something I am overlooking? The Bootstrap documentation only mentions using it with d-flex, which I have already done.

/*    .navicons {
   float: right !important
} */

// CSS code snippet omitted for brevity

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" >
<div class="row">
<div class="col-md-9">
          </div>
          <div class="col-md-3 navicons">
<div class="text-center iconwrap d-flex justify-content-end">
<div class="d-inline-block navicons1 d-flex align-items-center">
<div class="naviconshov1"><img src="https://i.imgur.com/FMb2eun.gif" alt="account"/></div>
  <a href="index.html"><img src="https://i.imgur.com/6w5w1r8.gif" alt="account"/></a>
</div>
// Additional HTML markup removed for succinctness

I also experimented with the following code to address the issue, yet the result remains unchanged with the icons staying in the top left corner:

.navicons {
float: right !important;
}
.iconwrap {
width: 100%;
min-height: 35px;
vertical-align: middle;
}

// Further CSS styles defined but omitted here

<div class="row">
<div class="col-md-9">
    </div>
    <div class="col-md-3 navicons">
    <div class="d-flex align-items-center iconwrap">
<div class="d-inline-block float-right navicons1">
<div class="naviconshov1"><img src="https://i.imgur.com/FMb2eun.gif" alt="account"/></div>
  <a href="index.html"><img src="https://i.imgur.com/6w5w1r8.gif" alt="account"/></a>
</div>
// More HTML markup removed for clarity

htmlcssbootstrap-4

Answer №1

Insert the following CSS code:

{
display: flex;
justify-content: center;
align-items: center;
}

into the div with class naviconshov1, naviconshov2, etc.

<div class="naviconshov1">

Answer №2

Uncertain if this aligns with your requirements. The icons have been centered using justify-content-center and align-items-center.

/*    .navicons {
   float: right !important
} */

.iconwrap {
  width: 100%;
  min-heigh: 35px;
  /*  position: relative; */
}

.navicons1,
.navicons2,
.navicons3 {
  width: 35px;
  height: 35px;
  background: #7dc623;
  opacity: 1;
  position: relative;
  /*  align-items: center; */
  /*top: 0;*/
  left: 0;
  z-index: 10;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.naviconshov1,
.naviconshov2,
.naviconshov3 {
  width: 35px;
  height: 35px;
  background: #ffffff;
  opacity: 1;
  position: absolute;
  /*align-items: center; */
  /*top: 0;*/
  left: 0;
  z-index: 10;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.navicons1:hover .naviconshov1 {
  opacity: 0;
}

.navicons2:hover .naviconshov2 {
  opacity: 0;
}

.navicons3:hover .naviconshov3 {
  opacity: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
  <div class="col-md-9">
  </div>
  <div class="col-md-3 navicons">
    <div class="text-center iconwrap d-flex justify-content-center">
      <div class="d-inline-block navicons1 d-flex justify-content-center  align-items-center">
        <div class="naviconshov1 d-flex justify-content-center align-items-center"><img src="https://i.imgur.com/FMb2eun.gif" alt="account" /></div>
        <a href="index.html"><img class="d-flex justify-content-center align-items-center" src="https://i.imgur.com/6w5w1r8.gif" alt="account" /></a>
      </div>
      <div class="d-inline-block navicons2 d-flex justify-content-center align-items-center">
        <div class="naviconshov2 d-flex justify-content-center  align-items-center"><img src="https://i.imgur.com/QGZVEQl.gif" alt="favorieten" /></div>
        <a href="index.html"><img class="d-flex justify-content-center align-items-center" src="https://i.imgur.com/1eY8XZN.gif" alt="favorieten" /></a>
      </div>
      <div class="d-inline-block navicons3 d-flex justify-content-center align-items-center">
        <div class="naviconshov3 d-flex justify-content-center align-items-center"><img  src="https://i.imgur.com/ueXdZR8.gif" alt="winkelmandje" /></div>
        <a href="index.html"><img class="d-flex justify-content-center align-items-center" src="https://i.imgur.com/DZxP59y.gif" alt="winkelmandje" /></a>
      </div>
    </div>
  </div>
</div>

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

Applying styled text to a Node.js chat application

I developed a chat application using node.js which allows users to enter a username and send messages. The messages are displayed in a <ul> format showing "username: message". I was looking for a way to make the username appear bold and in blue color ...

javascriptjqueryhtmlcssnode.js

Ensure the div element remains fixed at the top of the page

I created a script to identify when I reach the navigation bar div element and then change its CSS to have a fixed position at the top. However, I am encountering an issue where instead of staying fixed, it jumps back to the beginning of the screen and fli ...

javascriptcss

flex child moves outside parent when available space shifts

My dilemma involves a flex container (A) containing two or more flex items stacked in a column. The top flex item (B) is a Bootstrap Collapse panel, while the bottom item (C) consists of two horizontal divs (D and E). The problem arises when the collapse p ...

htmlcsstwitter-bootstrapflexbox

Shutting down the jQuery pop-up

I am struggling with trying to display this code as a popup on my website. Here is the code I have: <div id="myDialog" title="myTitle"> <div class="table_cell"> <div class="message"></div> </div> <div class="tabl ...

javascriptphpjqueryhtmlyii

"Concealing specific choices in Autocomplete with reactjs: A step-by-step guide

I am looking for a way to hide the selected option in a Dropdown menu so that it does not appear in the next dropdown. For example, if "Hockey" is selected in the first dropdown, it should not be displayed in the second dropdown; only "Baseball and badmint ...

cssreactjsmaterial-ui

Align the inner container in the outer container-fluid

I'm struggling to center a container inside a container-fluid. Any suggestions on how to make it work? /* Setup Buttons Specific Styling */ .setup-bg { background: url("https://image.ibb.co/geAGqy/setupbtns_bg.png"); background-repeat: no-repea ...

htmlcssbootstrap-4

Is it possible to change the inner html to null during an active ajax request?

My goal is to have two separate data.html files inserted into two different HTML files without needing a click event. I want the structure of my data.html files to remain consistent, while allowing the template of my website to change dynamically by callin ...

javascripthtmlajax

Updating user credits through the Model::factory() method is a common practice in my workflow

I need to update the UserCredits after a purchase. For example, if a user currently has 10 credits and purchases 10 more, I want to add the purchased credits to their existing total. The goal is to increment the current credit score with the new credits ...

phphtmlcsslaravel

Fixing the vertical centering of content when printing HTML

My bootstrap 4-based HTML page is looking good on most screens, but when I try to print it, the content is vertically centered in the print layout. How can I ensure that the content is displayed at the top of the paper? https://i.sstatic.net/kfjrx.png Be ...

htmlcssbootstrap-4printing

React modal image showing a misaligned image upon clicking

I recently integrated the react-modal-image library into my project to display images in a modal when clicked. However, I encountered an issue where the displayed image is off center with most of it appearing offscreen. I'm unsure what is causing this ...

javascripthtmlcssreactjs

Guide to create a sliding menu transition from the viewport to the header

I am just starting to learn jQuery and I want to create a menu similar to the one on this website Specifically, I would like the menu to slide down from the viewport to the header, as shown in the template in the link. I have searched through the jQuery ...

javascriptjqueryhtmlcss

Bootstrap 4 or ngBootstrap: A Comparison

I have a couple of inquiries: Firstly, I am wondering if ngBootstrap is compatible with Angular 4. While I've seen instances on Google where individuals have successfully used Angular 4 with ngBootstrap, the official site mentions dependencies on Ang ...

angulartwitter-bootstrapbootstrap-4ng-bootstrap

Is there a way to open an HTML file within the current Chrome app window?

Welcome, My goal is to create a Chrome App that serves as a replacement for the Chrome Dev Editor. Here is my current progress: background.js chrome.app.runtime.onLaunched.addListener(function() { chrome.app.window.create('backstage.html', { ...

javascriptcssjsonhtmlgoogle-chrome-app

Can someone explain the significance of this in an HTML form?

Can anyone explain the following code snippet found in a web form? I found this button code on a webpage, but I'm having trouble understanding it. Could someone provide some clarity? <input type="submit" name="ctl00$ContentPlaceHolder1$Button8" v ...

javascriptasp.nethtmlpostback

The element is not occupying the full width within the div container

I'm working with a div that contains some elements. My goal is to have these elements span the entire width of the container div. .container { height: 100px; width: 100px; display: flex; flex-direction: column; overflow: scroll; borde ...

htmlcss

Guide on showing a dropdown menu depending on the data in the current array index within a table

I am working with an object array that I want to display in a table. My goal is to have a dropdown select if the 'validvalues' field is not empty. How can I achieve this so that each row in the table has different options from the array? When &ap ...

javascripthtmlangulartypescript

Use Python to fetch a file from a webpage without having to actually open the webpage

I needed a method to automate the download of a file from a particular website without having to manually open the website. Everything should be done in the background. The website in question is Morningstar, and a specific example link is: . On this page ...

javascriptpythonhtmlseleniumweb

assisting with the transition effect using CSS3, JS, or jQuery

I am looking to alter the background-image of this particular image when transitioning to another one from my images folder, similar to this example. Below is the code that I have: CSS .image { position: relative; overflow: hidden; -webkit-tr ...

javascriptjqueryhtmlcss

Bring div button on top of the contenteditable field

I am working on an Angular app for a client and need to implement a clickable button at the bottom right of a contenteditable element, similar to the image shown below : https://i.sstatic.net/J6XdW.png The challenge is that the content needs to be scroll ...

javascripthtmlcssangularjscontenteditable

What is the best way to utilize AJAX to upload several images in PHP?

I have a UI that looks like this: https://i.sstatic.net/BAbwP.jpg I am trying to upload multiple videos using ajax in PHP. I attempted to use FormData() in jQuery for this purpose. However, it seems to only upload one image and not more than that. Her ...

javascriptjqueryajaxhtml