Vertically center-align div in BxSlider Carousel

CSS tables\n\nOrdinarily, as long as support for IE7 or earlier wasn't needed, I'd suggest adding display: table-cell; (along the lines of the question @darthmaim linked to above):\n\n.bxslider-inner {\n display: table-cell;\n vertical-align: middle;\n}\n...\n<div class=\"bxslider-inner\"><div>Content goes here</div></div>\n\n\nHowever, display: table-cell; doesn't work on floated elements (tested in IE8/9/10, Firefox, Safari, Chrome, Opera), as shown in this JSFiddle Demo. In the question @darthmaim linked to, the parent of the element is the one that's floated; that works fine. Here the child element is floated; that doesn't work.\n\nWorkaround\n\nIf editing the HTML source code is an option, you can add a div wrapper inside each .bxslider-inner, so that the use of display: table-cell; can be moved to a non-floated element: Updated demo.\n\n.bxslider-inner > div {\n display: table-cell;\n vertical-align: middle;\n height: 90px;\n}\n...\n<div class=\"bxslider-inner\"><div><div>Content goes here</div></div></div>\n\n\nThis assumes that the carousel container is intended to have a fixed height of 90px. Supporting a variable-height container (which varies based on the height of the tallest carousel element), would require additional work.\n\nJavaScript\n\nIf editing the HTML source code isn't an option, there are two solutions using JavaScript or jQuery:\n\n\nDynamically inject div wrappers of the type described above, rather than adding them to the static HTML: Updated demo\nDynamically add the appropriate amount of top spacing to each element, based on the calculated height of each element.\n",

We can vertcal align a div to the center by adding \"vertical-align:middle\" in the css and giving a fixesd height to the outer div. OR we can set by margin-top or can also use top attribute in css",

You can do it by adding top:30px\n\nHere vertical-align did not works because in the bxslider-inner div it adds additional style so it doesn't apply vertical-align here. So, in this case you can use top for that element.\n\nFiddle http://jsfiddle.net/sSqAx/3/",

Set the values slideMargin:0 and slideWidth: 100\n\nIt works.",

This should fix your problem:\n\nJSfiddle\n\nAnd one with different heights: JSfiddle\n\nHTML\n\n<div class=\"bxslider\">\n <div class=\"bxslider-inner\"><div style=\"width:80px; height:80px; background:#CCC; padding:5px;\"></div></div>\n <div class=\"bxslider-inner\"><div style=\"width:80px; height:80px; background:#F5F5F5; padding:5px;\"></div></div>\n <div class=\"bxslider-inner\"><div style=\"width:80px; height:10px; background:#6699cc; padding:5px;\"></div></div>\n <div class=\"bxslider-inner\"><div style=\"width:80px; height:80px; background:#F5F5F5; padding:5px;\"></div></div>\n</div>\n\n\nCSS\n\nbody {\n background: orange;\n margin-top: 50px;\n}\n\n.bxslider-inner {\n vertical-align: middle;\n display: inline-block;\n height: 80px;\n}\n\n\nJavaScript\n\n'use strict';\n\njQuery(document).ready(function(){\n jQuery('.bxslider').bxSlider({\n mode: 'horizontal',\n speed: 500,\n slideMargin:20,\n infiniteLoop: true,\n pager: false,\n controls: true,\n slideWidth: 80,\n minSlides: 1,\n maxSlides: 5,\n moveSlides: 1\n }\n });\n\n // Initial\n $('.bxslider-inner').each(function(){\n var height_parent = $(this).css('height').replace('px', '') * 1;\n var height_child = $('div', $(this)).css('height').replace('px', '') * 1;\n var padding_top_child = $('div', $(this)).css('padding-top').replace('px', '') * 1;\n var padding_bottom_child = $('div', $(this)).css('padding-bottom').replace('px', '') * 1;\n var top_margin = (height_parent - (height_child + padding_top_child + padding_bottom_child)) / 2;\n\n $(this).html('<div style=\"height: ' + top_margin + 'px; width: 100%;\"></div>' + $(this).html());\n });\n});\n\n\nKeep in mind that the calculated middle is very dependent on other height variables like padding, margin and borders. If you add styles like that, keep in mind that you need to add those to the calculation. Another option is to use box-sizing: border-box;, so all of that collapses to the inside of the div.\n\nbxslider-inner MUST have a height, or you need to somehow fetch the calculated DOM height to avoid it. If you really want that, please leave a note and I'll look into it.\n\nGood luck!\n\nUPDATE\n\n\nJSfiddle updated, should not stuck in a loop now.\nTested with a too high height, code doesn't seem to break, but might overflow to hidden\nLook at http://bxslider.com/options (> Callbacks > onSlideAfter). You can do modifications after each cycle if needed too. Here you can modify your code again if needed for complexion\n",

Updated answer:\nBecause the above answer by @doitlikejustin uses display: inline-block I have found that this adds on an extra 4px to each item so if you had 4 items in your carousel, it is pushed 16px off the right hand side because the .bx-wrapper width is calculated.\nTo prevent this, use flexbox on the parent div instead:\n.bxslider {\n display: flex;\n align-items: center;\n}\n.bxslider > div {\n float: none!important;\n}\n\nThis will not add the extra 4px spacing per item and will fit nicely.",

Update your CSS like this. The key is not floating the element because you are always making it inline-block\n\n.bxslider-inner {\n vertical-align: middle;\n display: inline-block;\n float: none !important;\n}\n\n\nOne more thing... To make it match your example, change slideMargin:20 to slideMargin:10 after you have done the float: none !important;\n\nFiddle: http://jsfiddle.net/sSqAx/9/",