The align-middle Bootstrap class does not seem to be working within the specified div

I want to vertically align text (

<span class="align-middle">middle</span>
) in the center of a div.

Here is the code snippet:

<div class="col-4 shadow product-added">
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-5">
          <div class="row">
            <img src="<?php echo $OTHERIMAGE1; ?>" class="">
          </div>
        </div>
        <div class="col-7">
          <span class="align-middle">middle</span>
        </div>
      </div>
    </div>
  </div>
</div>

What could be causing the misalignment of the text?

htmlcsstwitter-bootstrap

Answer №1

Yes, the functionality is there, but it seems to be contained within the span due to align-middle only being compatible with inline elements.

To resolve this, try applying it to the parent div using the class d-flex align-items-center

<div class="col-7 d-flex align-items-center">

I made a JSfiddle and adjusted the row height to test if it would function properly:

https://jsfiddle/net/vca42kxo/2/

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

Using Jquery to insert content into HTML using the .html() method is not possible

I am inserting Dynamic Code into a Div via Ajax and I also need to include some Javascript, but it's not displaying in the code. Below is the code snippet: $.ajax({ url: "ajax_add_logo_parts.php", data: 'act=getPartIm ...

javascriptjqueryhtml

Issues with retrieving $_POST values from a select form in PHP

When the button is clicked, I am sending a AJAX request to my PHP page using POST method with the selected data from a SELECT element. However, I am facing an issue where my PHP IF statements are not evaluating as true. It always defaults to the ELSE condi ...

javascriptphpjqueryhtmlajax

Hovering over a td tag and adding a border using CSS can cause the entire table to

While experimenting on a coding platform: <table> <tr> <td class="changeme">something</td> <td>something</td> <td>something</td> <td>something</td> < ...

htmlcsshoverborderhtml-table

Develop and test a query by examining its structure, parsing it, and assessing its effectiveness

Building a query using different conditions selected from html controls in a textarea, allowing users to make modifications as needed. On the client side: a(1, 3) > 20 b(4, 5) < 90 c(3, 0) = 80 The query formed is: a(1, 3) > 20 and b(4, 5) < ...

javascriptjquerypythonhtml

The JQuery script functions properly when directly embedded in an HTML file, but fails to work when linked from an external file

While I'm working on some code using JQuery's .hover method, I've encountered an interesting issue. It seems to work fine when written directly in the main HTML file index.html, but for some reason, it fails to execute when written in a Java ...

javascripthtmljquery

The document.write function in JavaScript is malfunctioning

I've been attempting to utilize the javascript function document.write to incorporate an external css file in my template. However, I am aiming to achieve this using Twig, like so: document.write('<link href="{{ asset('bundles/activos/cs ...

javascripthtmlcsssymfonytwig

Is it possible to send two parameters to a JavaScript function using HTML?

Seeking help to develop an .html page where two string inputs are passed as parameters to a .js function, which then returns the longer of the two strings based on their lengths. Initially, I successfully created a functional .js script in VS CODE. Here i ...

javascripthtml

Tips for incorporating background color with CSS pseudo-elements

I'm attempting to replicate the outcome shown in the screenshot but I'm having difficulty achieving it without adding any new DOM elements. When I click on the demo link and choose a date range, the start date and end date selections are not dis ...

cssreactjs

Trouble with DevExpress ASPxButton: Some Properties Fail to Update

It's been a while and I'm facing a tough challenge. I need to change the image source of an ASPxButton from the code behind, but it seems like the height, width, and border style are getting lost in the process (resulting in an image with its own ...

csswinformsdevexpressaspxgridview

Transform collapsible color upon materialize click

Is there a way to change the color of the collapsible header only when clicked? I'm struggling with adding the color inside the class element while calling the "connect" function. Can this be achieved? <div class="collapsible-header" onclick="conn ...

javascripthtmlmaterialize

Obtaining a variable from HTML and passing it to Node.js

Currently, I am utilizing express to handle form submissions. Within my HTML file, there are 20 inputs with unique ids such as address1, address2, address3, and so on. In my node js code, I access these input values using req.body.address1. Users have th ...

javascripthtmlnode.jsexpress

I'm attempting to make this script function correctly when an image is loaded

Can anyone help me figure out how to make this script function on image load instead of onclick? I came across the script on stackoverflow, but it was originally set up for onclick. I want it to work for onload or .load HTML====== <div id="contai ...

javascriptjqueryhtmlcss

The forecast button seems to be malfunctioning. Each time I attempt to click on it, a message pops up saying, "The server failed to comprehend the request sent by the browser (or proxy)."

Even though I provided all the necessary code, including the Flask app, predictionmodel.py, and HTML code, I am still encountering an error when running it locally after clicking submit. The browser (or proxy) sent a request that this server could not un ...

pythonhtmlmachine-learningflasknltk-trainer

Duplicate the canvas onto a new canvas

One of the functions I am using involves copying an old canvas to a new canvas. Here is the code snippet for this functionality: function cloneCanvas(oldCanvas) { //create a new canvas var newCanvas = document.createElement('canvas&a ...

javascriptjqueryhtmlcanvas

Guide to incorporating a fadeIn effect in Jquery triggered by a change event

Looking for some guidance on implementing a fade-in effect on a <p> tag with relevant CSS after making an AJAX call in response to a change event. Below is the current code snippet: $('#scenarioDropdownList').change(function() { var sc ...

javascriptjqueryhtmlcssajax

Replace the image with text inside an anchor when the anchor is being hovered

I want a logo (we'll call it .item-logo) to be shown inside a circle when not being hovered over, but when you hover over the container, the date should be displayed. Here is the HTML code: <div id="main-content" class="container animated"> ...

javascriptjqueryhtmlcss

Can file input buttons be custom styled?

Since I am using Material-UI, the traditional methods are not working for me. I have a form with two buttons positioned next to each other. One button is an "Upload File" input for users to upload a file, and the other is a submit button. I want both butto ...

javascriptcssuser-interfacematerial-ui

Warning on React component listing due to key issue originating from the parent component

Alert: It is essential that each child in a list has a distinct "key" prop. Please review the render method of ForwardRef(ListItem). A child from RecipientsList was passed. I have located this issue using the react-components debugger tool on Chrome. I ad ...

javascripthtmlreactjsmaterial-ui

Creating a navbar dropdown that is clickable on mobile devices and opens on hover on desktop is a simple way to improve

Utilizing Bootstrap 5 for my website creation, I am facing an issue with the navbar dropdown functionality. On mobile devices, the dropdown opens upon clicking but fails to close when clicked again. Meanwhile, on desktops, hovering over the dropdown works ...

htmlcssfrontendnavbarbootstrap-5

How to position div in the middle of Electron/VUE application's screen?

I am struggling to center a container div on the screen. The technology stack I am using includes Electron, VUE, HTML, and CSS. Here is the code snippet I have attempted: <template > <div class="login background" style="height:100%" > ...

htmlcsswebpackvue.jselectron