Tips for centering multiple images vertically within a div

Currently, I am using jQuery.carouFredSel for displaying banners. Everything is working fine except for one issue - the banners have variable heights which causes them to align at the top in the slider. I need a solution to align shorter banners in the middle. Can anyone help me with this?

To better illustrate the problem, I have created an example on JSFiddle: http://jsfiddle.net/kzhfe/12/

Here is the link to carouFredSel documentation: link

I have attempted different approaches to solve this issue, but none of them seem to work. Any assistance would be greatly appreciated.

jquerycssbannersliders

Answer №1

I made some modifications to your code snippet

Check out the updated code here: http://jsfiddle.net/user/example/abc123/

var h = $("#BannerSlider").height();
        $.map($("#BannerSlider img"), function(e){
            var top =( h- $(e).height())/2;
            $(e).css("margin-top",top);
 });

Answer №2

There is no requirement for JavaScript in this case, simply replace display: block; float: left; with 

display: inline-block; vertical-align: middle
: http://jsfiddle/net/kzhfe/17/

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

JQuery post will not be able to retrieve from Asp.Net SQL Session Mode

While working on my Asp.net Mvc mobile application with jQuery on the front end, I encountered an issue where it seemed to be losing session variables. To address this, I decided to change the session state from in-process to SQL Server. After running the ...

c#jqueryasp.netsqlsql-server

Can you explain the purpose of the URL function in the context of url("#foobar"

Currently, I am developing a CSS concatenator and one of the tasks involved is URL to absolute URL rewriting. For this process, I exclude any absolute URLs that start with http, https, etc. In the case of Django projects, they designate the following URL ...

css

What is the proper way to incorporate html entities in my specific situation?

In my application, I am attempting to incorporate double macron characters. My current method involves using the ͞ entity, like this: t͞t, which results in t͞t. However, I have encountered issues with reliability, as sometimes the ...

htmlcss

Designing a Stylish Notification Bar using HTML and CSS

Take a look at the code I'm currently working on: <div style="width:100%; position:absolute; border:0px; background-color:#232323; color:#ffffff; padding-top:5px; padding-bottom:5px; font-size:12px" align="center"> TEST TEST TEST TEST TEST Th ...

htmlcss

Tips for determining the height of the entire webpage using jQuery

I attempted the following code: $(window).height(); $("#content").height(); However, it did not provide an accurate value. ...

javascriptjqueryhtml

The hamburger icon is not visible on smaller screens when using the Bootstrap 5 navbar

'The stylesheets for Bootstrap CSS and JS have been included in the file. The content shows up fine with default colors, but not when I customize them.' ''' <li class="nav-item"> <a class= ...

htmlcssbootstrap-5

Leverage jQuery deferred objects to handle a dynamic amount of AJAX requests

When faced with multiple ajax requests, how can I execute them using deferreds? This is my approach: //qty_of_gets = 3; function getHTML(productID, qty_of_gets){ var dfd = $.Deferred(), i = 0, c = 0; // hypothetical cod ...

javascriptjqueryjquery-deferred

How to Preserve Scroll Position when Toggling a Div using jQuery

I've been struggling to find a solution for maintaining the scroll position of my page after a JQUERY toggle event. I've searched extensively but haven't found a fix yet. <script src="Scripts/_hideShowDiv/jquery-1.3.2.min.js" type="text/ ...

javascriptjqueryhtmlasp.netcss

Tips on activating the CSS style while typing using the onChange event in React

Is it possible to dynamically adjust the width of an input as we type in React? Currently, my input has a default width of 1ch. I would like it to increase or decrease based on the number of characters entered, so that the percentage sign stays at the end ...

javascriptcssreactjs

Delayed loading of CSS within app-root component in Angular

Currently, I am working on integrating an animation when the app starts within the contents of <app-root>...</app-root>. To achieve this, I have made the following changes: <app-root> <style> h1 { font-family: &ap ...

htmlcssangular

How to Align the Left Sidebar Using CSS

Seeking advice on how to create a layout with a centered header and left sidebar within a wrapper div. The desired effect is for the sidebar to be positioned slightly to the left of the header, as shown in the screenshot. Currently facing difficulty ensu ...

htmlcsssidebar

Clear existing markers from the map before inserting new markers

I have a map where initially the markers load coming from the database, Then there is a time-based Ajax request that fetches new records every minute. In my code snippet, I am using setMapOnAll(null) following the guidance from the Google Maps Documentati ...

javascriptphpjquerygoogle-maps

Is there a glitch with child margins in a relative-absolute positioning setup?

Could someone shed some light on how I can prevent the margin from one sibling div affecting another? The browser's layout seems a bit baffling to me in this scenario. I'm attempting to position the yellow box relative to its parent, but the pre ...

javascripthtmlcss

Is it Possible to Customize the Appearance of a Broken Link Using CSS?

Can you change the color of broken links on your site to distinguish them from working ones? For example, making working links blue and broken links red. If CSS is not an option, is it possible to use JavaScript to detect broken links and style them diffe ...

javascripthtmlcss

Encountering Issues While Parsing JSON Data

Below is the JSON string I currently have. The opening and closing brackets have been removed as I need to utilize the JSON values in jQuery to dynamically populate a select box: { "text": "Pediatric FA, CPR & AED (2015)", "id": "1281770000024 ...

javascriptjqueryjsonsyntax-error

What is the most effective way to transfer color values from one div to another?

When recreating a game similar to Mastermind, I encountered a challenge of copying color values from one div to another upon clicking a button. Despite browsing the web, I haven't found a solution for this specific situation. Below is the code I have ...

javascriptjqueryhtmlcss

What methods does DevTools offer for identifying the font used in an SVG?

Can anyone help me identify the font used in an SVG marker displayed on a Google Maps surface? I am specifically referring to the number 9 on a blue marker in this codepen. The label has these properties: label: { text: "9", color: "white", f ...

htmlcsssvggoogle-chrome-devtoolsfirefox-developer-tools

How to access XML tags that are repeated at multiple levels of hierarchy using JavaScript

I'm working with an XML file that has a specific hierarchy structure as shown below: item item (item details) item (item details) item item (item details) item (i ...

javascriptjqueryxml

Personalize your message in a JavaScript alert using Bootstrap notifications

On numerous websites, a new visitor landing on the page is greeted with an alert notification that pops up in either the bottom right or left corner. The code below functions perfectly fine, except for my unsuccessful attempts to change the message text w ...

javascriptjquerynotificationsalert

Issue with wp_ajax function not being triggered in Wordpress

Attempting to implement my first AJAX Function in Wordpress 4.3. I created a plugin called "calipso". Within the plugin, there are two files: calipso.php : <?php /** * @package calipso * @version 1.0 */ /* Plugin Name: calipso Plugin URI: http://www. ...

javascriptphpjqueryajaxwordpress