Advertisement
Tech

CSS Vertical Align Tutorial

Use of the Cascading Style Sheet (CSS) vertical-align property can help you give a web page the visual effect you desire when it comes to vertically centering elements.

By Sam OBrien
Desk Tech
Reading time 4 min read
Word count 719
Web development Internet Css help
CSS Vertical Align Tutorial
Advertisement
Quick Take

Use of the Cascading Style Sheet (CSS) vertical-align property can help you give a web page the visual effect you desire when it comes to vertically centering elements.

On this page

Important Points of CSS Vertical-Align: An Inline Element Style

The Cascading Style Sheet (CSS) vertical-align property is usually considered one of the slightly tricky ones. Many beginners in web design and development or people who don’t work with CSS often tend to forget some important points. However, these points have to be kept in mind when trying to achieve vertical centering of an element. I must agree with those who don’t view CSS as a very friendly language for styling content, but trying to do front-end development without it isn’t very feasible unless you develop a site entirely in Flash.

The definition of the CSS vertical-align property, from the web site of w3schools.com, says that it, “sets the vertical alignment of an element.” It’s not specified that the element needs to be inline and not block level in order to work. Block level elements include tags such as

,

,

, and

thru

. They cause content to display as “blocks” or “chunks” of content. Inline, also called text-level elements, include the , , anchor (), and line-break (
) tags. In other words, applying the CSS vertical-align property to a container (block level element) won’t cause that container’s child elements to be vertically centered. The exception to this rule is the tag.

Advertisement

Examples of the Use of CSS Vertical-Align

Almost all cases of the use of CSS vertical-align involve vertically centering text next to an image. This style can affect just one image or several images contained within the “box” area defined by a block level element. You could also use this property to vertically align all of the images (child elements) within all of the

tags (block level) on a page if that’s what you wanted. The block level element might be thought of as the “parent.” Remember that the style must be applied to the child or inline tag and not to the block level one in order to work. For example, if you want to vertically center some text next to an image, you would apply this property to the tag, not to the block level tag that contains that image tag.

In the example code below, you can see that I have three images, each contained separately within the

tags. I could have put all of them within one set of

tags and used the line-break tag to “stack” them one on top of the other, but I simply wanted to use the easiest way to space them for this example. The screen shots that follow show the results of using the “middle” value for CSS vertical-align and also the “top” value. It’ll be difficult to actually see the subtle differences between some of the available values for this property such as “baseline” (the default) and “sub,” but there is a difference if you look closely. Some of the other values you can use are “super” and “text-top.”

Advertisement

The Code Behind the Style

Using the

Using the

Advertisement

Examples Not Involving Images

So, if you don’t use the example of vertically aligning text next to an image, what other one could you use? You can also see this CSS style in action if you vertically align text next to a text box for instance. The cases in which you’d want to do this are probably rare, but there might be a time when you need or want to. Instead of applying the style to the tag, you would apply CSS vertical-align to the inline ",a.noCloneChecked=!!S.cloneNode(!0).lastChild.defaultValue,S.innerHTML="",a.option=!!S.lastChild,l={thead:[1,"

","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function r(e,t){var s;return s="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],0[0]===t||t&&d(e,t)?n.merge([e],s):s}function ve(e,t){for(var n=0,o=e.length;n",""]),nt=/<|&#?\w+;/;function Ze(e,t,s,o,i){for(var a,c,h,m,p,g,d=t.createDocumentFragment(),f=[],u=0,v=e.length;u\s*$/g;function Fe(e,t){return d(e,"table")&&d(11!==t.nodeType?t:t.firstChild,"tr")&&n(e).children("tbody")[0]||e}function xt(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function Ut(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function De(e,t){var o,i,a,r,l,d;if(1===t.nodeType){if(s.hasData(e)&&(a=s.get(e).events))for(i in s.remove(t,"handle events"),a)for(o=0,r=a[i].length;o").attr(e.scriptAttrs||{}).prop({charset:e.scriptCharset,src:e.url}).on("load error",t=function(e){s.remove(),t=null,e&&a("error"===e.type?404:200,e.type)}),i.head.appendChild(s[0])},abort:function(){t&&t()}}}),oe=[],ee=/(=)\?(?=&|$)|\?\?/,n.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=oe.pop()||n.expando+"_"+Oe.guid++;return this[e]=!0,e}}),n.ajaxPrefilter("json jsonp",function(t,s,i){var a,r,c,l=!1!==t.jsonp&&(ee.test(t.url)?"url":"string"==typeof t.data&&0===(t.contentType||"").indexOf("application/x-www-form-urlencoded")&&ee.test(t.data)&&"data");if(l||"jsonp"===t.dataTypes[0])return a=t.jsonpCallback=o(t.jsonpCallback)?t.jsonpCallback():t.jsonpCallback,l?t[l]=t[l].replace(ee,"$1"+a):!1!==t.jsonp&&(t.url+=(de.test(t.url)?"&":"?")+t.jsonp+"="+a),t.converters["script json"]=function(){return c||n.error(a+" was not called"),c[0]},t.dataTypes[0]="json",r=e[a],e[a]=function(){c=arguments},i.always(function(){0[0]===r?n(e).removeProp(a):e[a]=r,t[a]&&(t.jsonpCallback=s.jsonpCallback,oe.push(a)),c&&o(r)&&r(c[0]),c=r=0[0]}),"script"}),a.createHTMLDocument=((ze=i.implementation.createHTMLDocument("").body).innerHTML="
",2===ze.childNodes.length),n.parseHTML=function(e,t,s){return"string"!=typeof e?[]:("boolean"==typeof t&&(s=t,t=!1),t||(a.createHTMLDocument?((c=(t=i.implementation.createHTMLDocument("")).createElement("base")).href=i.location.href,t.head.appendChild(c)):t=i),o=!s&&[],(r=_e.exec(e))?[t.createElement(r[1])]:(r=Ze([e],t,o),o&&o.length&&n(o).remove(),n.merge([],r.childNodes)));var o,r,c},n.fn.load=function(e,t,s){var i,c,l,a=this,r=e.indexOf(" ");return-1").append(n.parseHTML(e)).find(i):e)}).always(s&&function(e,t){a.each(function(){s.apply(this,l||[e.responseText,t,e])})}),this},n.expr.pseudos.animated=function(e){return n.grep(n.timers,function(t){return e===t.elem}).length},n.offset={setOffset:function(e,t,s){var a,r,c,l,d,m,u=n.css(e,"position"),h=n(e),i={};"static"===u&&(e.style.position="relative"),a=h.offset(),c=n.css(e,"top"),d=n.css(e,"left"),("absolute"===u||"fixed"===u)&&-1<(c+d).indexOf("auto")?(l=(m=h.position()).top,r=m.left):(l=parseFloat(c)||0,r=parseFloat(d)||0),o(t)&&(t=t.call(e,s,n.extend({},a))),null!=t.top&&(i.top=t.top-a.top+l),null!=t.left&&(i.left=t.left-a.left+r),"using"in t?t.using.call(e,i):("number"==typeof i.top&&(i.top+="px"),"number"==typeof i.left&&(i.left+="px"),h.css(i))}},n.fn.extend({offset:function(e){if(arguments.length)return 0[0]===e?this:this.each(function(t){n.offset.setOffset(this,e,t)});var s,o,t=this[0];return t?t.getClientRects().length?(s=t.getBoundingClientRect(),o=t.ownerDocument.defaultView,{top:s.top+o.pageYOffset,left:s.left+o.pageXOffset}):{top:0,left:0}:0[0]},position:function(){if(this[0]){var e,s,o,t=this[0],i={top:0,left:0};if("fixed"===n.css(t,"position"))s=t.getBoundingClientRect();else{for(s=this.offset(),o=t.ownerDocument,e=t.offsetParent||o.documentElement;e&&(e===o.body||e===o.documentElement)&&"static"===n.css(e,"position");)e=e.parentNode;e&&e!==t&&1===e.nodeType&&((i=n(e).offset()).top+=n.css(e,"borderTopWidth",!0),i.left+=n.css(e,"borderLeftWidth",!0))}return{top:s.top-i.top-n.css(t,"marginTop",!0),left:s.left-i.left-n.css(t,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){for(var e=this.offsetParent;e&&"static"===n.css(e,"position");)e=e.offsetParent;return e||w})}}),n.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(e,t){var s="pageYOffset"===t;n.fn[e]=function(n){return v(this,function(e,n,o){var i;if(A(e)?i=e:9===e.nodeType&&(i=e.defaultView),0[0]===o)return i?i[t]:e[n];i?i.scrollTo(s?i.pageXOffset:o,s?o:i.pageYOffset):e[n]=o},e,n,arguments.length)}}),n.each(["top","left"],function(e,t){n.cssHooks[t]=Ve(a.pixelPosition,function(e,s){if(s)return s=P(e,t),se.test(s)?n(e).position()[t]+"px":s})}),n.each({Height:"height",Width:"width"},function(e,t){n.each({padding:"inner"+e,content:t,"":"outer"+e},function(s,o){n.fn[o]=function(i,a){var r=arguments.length&&(s||"boolean"!=typeof i),c=s||(!0===i||!0===a?"margin":"border");return v(this,function(t,s,i){var a;return A(t)?0===o.indexOf("outer")?t["inner"+e]:t.document.documentElement["client"+e]:9===t.nodeType?(a=t.documentElement,Math.max(t.body["scroll"+e],a["scroll"+e],t.body["offset"+e],a["offset"+e],a["client"+e])):0[0]===i?n.css(t,s,c):n.style(t,s,i,c)},t,r?i:0[0],r)}})}),n.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){n.fn[t]=function(e){return this.on(t,e)}}),n.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,s){return this.on(t,e,n,s)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),n.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,t){n.fn[t]=function(e,n){return 0this._items.length-1||e<0))if(this._isSliding)t(this._element).one(r.SLID,function(){return o.to(e)});else{if(n===e)return this.pause(),void this.cycle();s=ndocument.documentElement.clientHeight;!this._isBodyOverflowing&&e&&(this._element.style.paddingLeft=this._scrollbarWidth+"px"),this._isBodyOverflowing&&!e&&(this._element.style.paddingRight=this._scrollbarWidth+"px")},e._resetAdjustments=function(){this._element.style.paddingLeft="",this._element.style.paddingRight=""},e._checkScrollbar=function(){var e=document.body.getBoundingClientRect();this._isBodyOverflowing=e.left+e.right
',trigger:"hover focus",title:"",delay:0,html:!1,selector:!1,placement:"top",offset:0,container:!1,fallbackPlacement:"flip",boundary:"scrollParent",sanitize:!0,sanitizeFn:null,whiteList:xt,popperConfig:null},L="show",Te="out",It={HIDE:"hide"+d,HIDDEN:"hidden"+d,SHOW:"show"+d,SHOWN:"shown"+d,INSERTED:"inserted"+d,CLICK:"click"+d,FOCUSIN:"focusin"+d,FOCUSOUT:"focusout"+d,MOUSEENTER:"mouseenter"+d,MOUSELEAVE:"mouseleave"+d},D="fade",B="show",$t=".tooltip-inner",Wt=".arrow",V="hover",we="focus",qt="click",Yt="manual",w=function(){function o(e,t){if("undefined"==typeof n)throw new TypeError("Bootstrap's tooltips require Popper.js (https://popper.js.org/)");this._isEnabled=!0,this._timeout=0,this._hoverState="",this._activeTrigger={},this._popper=null,this.element=e,this.config=this._getConfig(t),this.tip=null,this._setListeners()}var e=o.prototype;return e.enable=function(){this._isEnabled=!0},e.disable=function(){this._isEnabled=!1},e.toggleEnabled=function(){this._isEnabled=!this._isEnabled},e.toggle=function(e){if(this._isEnabled)if(e){var s=this.constructor.DATA_KEY,n=t(e.currentTarget).data(s);n||(n=new this.constructor(e.currentTarget,this._getDelegateConfig()),t(e.currentTarget).data(s,n)),n._activeTrigger.click=!n._activeTrigger.click,n._isWithActiveTrigger()?n._enter(null,n):n._leave(null,n)}else{if(t(this.getTipElement()).hasClass(B))return void this._leave(null,this);this._enter(null,this)}},e.dispose=function(){clearTimeout(this._timeout),t.removeData(this.element,this.constructor.DATA_KEY),t(this.element).off(this.constructor.EVENT_KEY),t(this.element).closest(".modal").off("hide.bs.modal",this._hideModalHandler),this.tip&&t(this.tip).remove(),this._isEnabled=null,this._timeout=null,this._hoverState=null,this._activeTrigger=null,this._popper&&this._popper.destroy(),this._popper=null,this.element=null,this.config=null,this.tip=null},e.show=function(){if(e=this,"none"===t(this.element).css("display"))throw new Error("Please use show on visible elements");if(i=t.Event(this.constructor.Event.SHOW),this.isWithContent()&&this._isEnabled){t(this.element).trigger(i);var e,o,i,a,r,c,d,u,h,l=s.findShadowRoot(this.element),m=t.contains(null!==l?l:this.element.ownerDocument.documentElement,this.element);if(i.isDefaultPrevented()||!m)return;o=this.getTipElement(),a=s.getUID(this.constructor.NAME),o.setAttribute("id",a),this.element.setAttribute("aria-describedby",a),this.setContent(),this.config.animation&&t(o).addClass(D),d="function"==typeof this.config.placement?this.config.placement.call(this,o,this.element):this.config.placement,r=this._getAttachment(d),this.addAttachmentClass(r),u=this._getContainer(),t(o).data(this.constructor.DATA_KEY,this),t.contains(this.element.ownerDocument.documentElement,this.tip)||t(o).appendTo(u),t(this.element).trigger(this.constructor.Event.INSERTED),this._popper=new n(this.element,o,this._getPopperConfig(r)),t(o).addClass(B),"ontouchstart"in document.documentElement&&t(document.body).children().on("mouseover",null,t.noop),c=function(){e.config.animation&&e._fixTransition();var n=e._hoverState;e._hoverState=null,t(e.element).trigger(e.constructor.Event.SHOWN),n===Te&&e._leave(null,e)},t(this.tip).hasClass(D)?(h=s.getTransitionDurationFromElement(this.tip),t(this.tip).one(s.TRANSITION_END,c).emulateTransitionEnd(h)):c()}},e.hide=function(e){function i(){n._hoverState!==L&&o.parentNode&&o.parentNode.removeChild(o),n._cleanTipClass(),n.element.removeAttribute("aria-describedby"),t(n.element).trigger(n.constructor.Event.HIDDEN),null!==n._popper&&n._popper.destroy(),e&&e()}var r,n=this,o=this.getTipElement(),a=t.Event(this.constructor.Event.HIDE);t(this.element).trigger(a),!a.isDefaultPrevented()&&(t(o).removeClass(B),"ontouchstart"in document.documentElement&&t(document.body).children().off("mouseover",null,t.noop),this._activeTrigger[qt]=!1,this._activeTrigger[we]=!1,this._activeTrigger[V]=!1,t(this.tip).hasClass(D)?(r=s.getTransitionDurationFromElement(o),t(o).one(s.TRANSITION_END,i).emulateTransitionEnd(r)):i(),this._hoverState="")},e.update=function(){null!==this._popper&&this._popper.scheduleUpdate()},e.isWithContent=function(){return Boolean(this.getTitle())},e.addAttachmentClass=function(e){t(this.getTipElement()).addClass(Ke+"-"+e)},e.getTipElement=function(){return this.tip=this.tip||t(this.config.template)[0],this.tip},e.setContent=function(){var e=this.getTipElement();this.setElementContent(t(e.querySelectorAll($t)),this.getTitle()),t(e).removeClass(D+" "+B)},e.setElementContent=function(e,n){"object"!=typeof n||!n.nodeType&&!n.jquery?this.config.html?(this.config.sanitize&&(n=Xe(n,this.config.whiteList,this.config.sanitizeFn)),e.html(n)):e.text(n):this.config.html?t(n).parent().is(e)||e.empty().append(n):e.text(t(n).text())},e.getTitle=function(){var e=this.element.getAttribute("data-original-title");return e=e||("function"==typeof this.config.title?this.config.title.call(this.element):this.config.title)},e._getPopperConfig=function(e){var t=this;return i({},{placement:e,modifiers:{offset:this._getOffset(),flip:{behavior:this.config.fallbackPlacement},arrow:{element:Wt},preventOverflow:{boundariesElement:this.config.boundary}},onCreate:function(e){e.originalPlacement!==e.placement&&t._handlePopperPlacementChange(e)},onUpdate:function(e){return t._handlePopperPlacementChange(e)}},{},this.config.popperConfig)},e._getOffset=function(){var t=this,e={};return"function"==typeof this.config.offset?e.fn=function(e){return e.offsets=i({},e.offsets,{},t.config.offset(e.offsets,t.element)||{}),e}:e.offset=this.config.offset,e},e._getContainer=function(){return!1===this.config.container?document.body:s.isElement(this.config.container)?t(this.config.container):t(document).find(this.config.container)},e._getAttachment=function(e){return Lt[e.toUpperCase()]},e._setListeners=function(){var e=this;this.config.trigger.split(" ").forEach(function(n){if("click"===n)t(e.element).on(e.constructor.Event.CLICK,e.config.selector,function(t){return e.toggle(t)});else if(n!==Yt){var s=n===V?e.constructor.Event.MOUSEENTER:e.constructor.Event.FOCUSIN,o=n===V?e.constructor.Event.MOUSELEAVE:e.constructor.Event.FOCUSOUT;t(e.element).on(s,e.config.selector,function(t){return e._enter(t)}).on(o,e.config.selector,function(t){return e._leave(t)})}}),this._hideModalHandler=function(){e.element&&e.hide()},t(this.element).closest(".modal").on("hide.bs.modal",this._hideModalHandler),this.config.selector?this.config=i({},this.config,{trigger:"manual",selector:""}):this._fixTitle()},e._fixTitle=function(){var e=typeof this.element.getAttribute("data-original-title");!this.element.getAttribute("title")&&"string"==e||(this.element.setAttribute("data-original-title",this.element.getAttribute("title")||""),this.element.setAttribute("title",""))},e._enter=function(e,n){var s=this.constructor.DATA_KEY;(n=n||t(e.currentTarget).data(s))||(n=new this.constructor(e.currentTarget,this._getDelegateConfig()),t(e.currentTarget).data(s,n)),e&&(n._activeTrigger["focusin"===e.type?we:V]=!0),t(n.getTipElement()).hasClass(B)||n._hoverState===L?n._hoverState=L:(clearTimeout(n._timeout),n._hoverState=L,n.config.delay&&n.config.delay.show?n._timeout=setTimeout(function(){n._hoverState===L&&n.show()},n.config.delay.show):n.show())},e._leave=function(e,n){var s=this.constructor.DATA_KEY;(n=n||t(e.currentTarget).data(s))||(n=new this.constructor(e.currentTarget,this._getDelegateConfig()),t(e.currentTarget).data(s,n)),e&&(n._activeTrigger["focusout"===e.type?we:V]=!1),n._isWithActiveTrigger()||(clearTimeout(n._timeout),n._hoverState=Te,n.config.delay&&n.config.delay.hide?n._timeout=setTimeout(function(){n._hoverState===Te&&n.hide()},n.config.delay.hide):n.hide())},e._isWithActiveTrigger=function(){for(var e in this._activeTrigger)if(this._activeTrigger[e])return!0;return!1},e._getConfig=function(e){var n=t(this.element).data();return Object.keys(n).forEach(function(e){-1!==Dt.indexOf(e)&&delete n[e]}),"number"==typeof(e=i({},this.constructor.Default,{},n,{},"object"==typeof e&&e?e:{})).delay&&(e.delay={show:e.delay,hide:e.delay}),"number"==typeof e.title&&(e.title=e.title.toString()),"number"==typeof e.content&&(e.content=e.content.toString()),s.typeCheckConfig(_,e,this.constructor.DefaultType),e.sanitize&&(e.template=Xe(e.template,e.whiteList,e.sanitizeFn)),e},e._getDelegateConfig=function(){var e,t={};if(this.config)for(e in this.config)this.constructor.Default[e]!==this.config[e]&&(t[e]=this.config[e]);return t},e._cleanTipClass=function(){var n=t(this.getTipElement()),e=n.attr("class").match(zt);null!==e&&e.length&&n.removeClass(e.join(""))},e._handlePopperPlacementChange=function(e){var t=e.instance;this.tip=t.popper,this._cleanTipClass(),this.addAttachmentClass(this._getAttachment(e.placement))},e._fixTransition=function(){var e=this.getTipElement(),n=this.config.animation;null===e.getAttribute("x-placement")&&(t(e).removeClass(D),this.config.animation=!1,this.hide(),this.show(),this.config.animation=n)},o._jQueryInterface=function(e){return this.each(function(){var n=t(this).data(ye),s="object"==typeof e&&e;if((n||!/dispose|hide/.test(e))&&(n||(n=new o(this,s),t(this).data(ye,n)),"string"==typeof e)){if("undefined"==typeof n[e])throw new TypeError('No method named "'+e+'"');n[e]()}})},h(o,null,[{key:"VERSION",get:function(){return"4.4.1"}},{key:"Default",get:function(){return Rt}},{key:"NAME",get:function(){return _}},{key:"DATA_KEY",get:function(){return ye}},{key:"Event",get:function(){return It}},{key:"EVENT_KEY",get:function(){return d}},{key:"DefaultType",get:function(){return Nt}}]),o}();t.fn[_]=w._jQueryInterface,t.fn[_].Constructor=w,t.fn[_].noConflict=function(){return t.fn[_]=Ft,w._jQueryInterface};var F="popover",ge="bs.popover",u="."+ge,Jt=t.fn[F],at="bs-popover",tn=new RegExp("(^|\\s)"+at+"\\S+","g"),nn=i({},w.Default,{placement:"right",trigger:"click",content:"",template:''}),sn=i({},w.DefaultType,{content:"(string|element|function)"}),on="fade",an="show",rn=".popover-header",cn=".popover-body",ln={HIDE:"hide"+u,HIDDEN:"hidden"+u,SHOW:"show"+u,SHOWN:"shown"+u,INSERTED:"inserted"+u,CLICK:"click"+u,FOCUSIN:"focusin"+u,FOCUSOUT:"focusout"+u,MOUSEENTER:"mouseenter"+u,MOUSELEAVE:"mouseleave"+u},pe=function(e){function n(){return e.apply(this,arguments)||this}!function(e,t){e.prototype=Object.create(t.prototype),(e.prototype.constructor=e).__proto__=t}(n,e);var s=n.prototype;return s.isWithContent=function(){return this.getTitle()||this._getContent()},s.addAttachmentClass=function(e){t(this.getTipElement()).addClass(at+"-"+e)},s.getTipElement=function(){return this.tip=this.tip||t(this.config.template)[0],this.tip},s.setContent=function(){var e,n=t(this.getTipElement());this.setElementContent(n.find(rn),this.getTitle()),e=this._getContent(),"function"==typeof e&&(e=e.call(this.element)),this.setElementContent(n.find(cn),e),n.removeClass(on+" "+an)},s._getContent=function(){return this.element.getAttribute("data-content")||this.config.content},s._cleanTipClass=function(){var n=t(this.getTipElement()),e=n.attr("class").match(tn);null!==e&&0=this._offsets[e]&&("undefined"==typeof this._offsets[e+1]||tPrevious',nextArrow:'',autoplay:!1,autoplaySpeed:3e3,centerMode:!1,centerPadding:"50px",cssEase:"ease",customPaging:function(t,n){return e('
`,T=function(){function i(){var e=arguments.length>0&&arguments[0]!==0[0]?arguments[0]:{};m(this,i),this.customOptions=e,this.settings=u(w,e),this.effectsClasses=this.getAnimationClasses(),this.videoPlayers={},this.apiEvents=[],this.fullElementsList=!1}return f(i,[{key:"init",value:function(){var t=this,e=this.getSelector();e&&(this.baseEvents=c("click",{onElement:e,withCallback:function(e,n){e.preventDefault(),t.open(n)}})),this.elements=this.getElements()}},{key:"open",value:function(){var n,o,i,a,c,l=arguments.length>0&&arguments[0]!==0[0]?arguments[0]:null,u=arguments.length>1&&arguments[1]!==0[0]?arguments[1]:null;if(this.elements.length==0)return!1;this.activeSlide=null,this.prevActiveSlideIndex=null,this.prevActiveSlide=null,n=_(u)?u:this.settings.startAt,d(l)&&(i=l.getAttribute("data-gallery"),i&&(this.fullElementsList=this.elements,this.elements=this.getGalleryElements(this.elements,i)),r(n)&&(n=this.getElementIndex(l),n<0&&(n=0))),_(n)||(n=0),this.build(),g(this.overlay,this.settings.openEffect=="none"?"none":this.settings.cssEfects.fade.in),a=document.body,c=window.innerWidth-document.documentElement.clientWidth,c>0&&(o=document.createElement("style"),o.type="text/css",o.className="gcss-styles",o.innerText=".gscrollbar-fixer {margin-right: ".concat(c,"px}"),document.head.appendChild(o),e(a,"gscrollbar-fixer")),e(a,"glightbox-open"),e(x,"glightbox-open"),q&&(e(document.body,"glightbox-mobile"),this.settings.slideEffect="slide"),this.showSlide(n,!0),this.elements.length==1?(e(this.prevButton,"glightbox-button-hidden"),e(this.nextButton,"glightbox-button-hidden")):(s(this.prevButton,"glightbox-button-hidden"),s(this.nextButton,"glightbox-button-hidden")),this.lightboxOpen=!0,this.trigger("open"),t(this.settings.onOpen)&&this.settings.onOpen(),S&&this.settings.touchNavigation&&G(this),this.settings.keyboardNavigation&&se(this)}},{key:"openAt",value:function(){var e=arguments.length>0&&arguments[0]!==0[0]?arguments[0]:0;this.open(null,e)}},{key:"showSlide",value:function(){var e,n,i,r,o=this,t=arguments.length>0&&arguments[0]!==0[0]?arguments[0]:0,c=arguments.length>1&&arguments[1]!==0[0]&&arguments[1];P(this.loader),this.index=parseInt(t),i=this.slidesContainer.querySelector(".current"),i&&s(i,"current"),this.slideAnimateOut(),e=this.slidesContainer.querySelectorAll(".gslide")[t],a(e,"loaded")?(this.slideAnimateIn(e,c),A(this.loader)):(P(this.loader),n=this.elements[t],r={index:this.index,slide:e,slideNode:e,slideConfig:n.slideConfig,slideIndex:this.index,trigger:n.node,player:null},this.trigger("slide_before_load",r),n.instance.setContent(e,function(){A(o.loader),o.resize(),o.slideAnimateIn(e,c),o.trigger("slide_after_load",r)})),this.slideDescription=e.querySelector(".gslide-description"),this.slideDescriptionContained=this.slideDescription&&a(this.slideDescription.parentNode,"gslide-media"),this.settings.preload&&(this.preloadSlide(t+1),this.preloadSlide(t-1)),this.updateNavigationClasses(),this.activeSlide=e}},{key:"preloadSlide",value:function(e){var t,n,s,o,i=this;if(e<0||e>this.elements.length-1)return!1;if(r(this.elements[e]))return!1;if(t=this.slidesContainer.querySelectorAll(".gslide")[e],a(t,"loaded"))return!1;n=this.elements[e],o=n.type,s={index:e,slide:t,slideNode:t,slideConfig:n.slideConfig,slideIndex:e,trigger:n.node,player:null},this.trigger("slide_before_load",s),o=="video"||o=="external"?setTimeout(function(){n.instance.setContent(t,function(){i.trigger("slide_after_load",s)})},200):n.instance.setContent(t,function(){i.trigger("slide_after_load",s)})}},{key:"prevSlide",value:function(){this.goToSlide(this.index-1)}},{key:"nextSlide",value:function(){this.goToSlide(this.index+1)}},{key:"goToSlide",value:function(){var e=arguments.length>0&&arguments[0]!==0[0]&&arguments[0];if(this.prevActiveSlide=this.activeSlide,this.prevActiveSlideIndex=this.index,!this.loop()&&(e<0||e>this.elements.length-1))return!1;e<0?e=this.elements.length-1:e>=this.elements.length&&(e=0),this.showSlide(e)}},{key:"insertSlide",value:function(){var n,s,o,i,a,r,c,l,d=arguments.length>0&&arguments[0]!==0[0]?arguments[0]:{},e=arguments.length>1&&arguments[1]!==0[0]?arguments[1]:-1;e<0&&(e=this.elements.length),o=new b(d,this,e),i=o.getConfig(),n=u({},i),r=o.create(),c=this.elements.length-1,n.index=e,n.node=!1,n.instance=o,n.slideConfig=i,this.elements.splice(e,0,n),s=null,a=null,this.slidesContainer&&(e>c?this.slidesContainer.appendChild(r):(l=this.slidesContainer.querySelectorAll(".gslide")[e],this.slidesContainer.insertBefore(r,l)),(this.settings.preload&&this.index==0&&e==0||this.index-1==e||this.index+1==e)&&this.preloadSlide(e),this.index==0&&e==0&&(this.index=1),this.updateNavigationClasses(),s=this.slidesContainer.querySelectorAll(".gslide")[e],a=this.getSlidePlayerInstance(e),n.slideNode=s),this.trigger("slide_inserted",{index:e,slide:s,slideNode:s,slideConfig:i,slideIndex:e,trigger:null,player:a}),t(this.settings.slideInserted)&&this.settings.slideInserted({index:e,slide:s,player:a})}},{key:"removeSlide",value:function(){var n,e=arguments.length>0&&arguments[0]!==0[0]?arguments[0]:-1;if(e<0||e>this.elements.length-1)return!1;n=this.slidesContainer&&this.slidesContainer.querySelectorAll(".gslide")[e],n&&(this.getActiveSlideIndex()==e&&(e==this.elements.length-1?this.prevSlide():this.nextSlide()),n.parentNode.removeChild(n)),this.elements.splice(e,1),this.trigger("slide_removed",e),t(this.settings.slideRemoved)&&this.settings.slideRemoved(e)}},{key:"slideAnimateIn",value:function(n,o){var a,d,i=this,h=n.querySelector(".gslide-media"),u=n.querySelector(".gslide-description"),c={index:this.prevActiveSlideIndex,slide:this.prevActiveSlide,slideNode:this.prevActiveSlide,slideIndex:this.prevActiveSlide,slideConfig:r(this.prevActiveSlideIndex)?null:this.elements[this.prevActiveSlideIndex].slideConfig,trigger:r(this.prevActiveSlideIndex)?null:this.elements[this.prevActiveSlideIndex].node,player:this.getSlidePlayerInstance(this.prevActiveSlideIndex)},l={index:this.index,slide:this.activeSlide,slideNode:this.activeSlide,slideConfig:this.elements[this.index].slideConfig,slideIndex:this.index,trigger:this.elements[this.index].node,player:this.getSlidePlayerInstance(this.index)};h.offsetWidth>0&&u&&(A(u),u.style.display=""),s(n,this.effectsClasses),o?g(n,this.settings.cssEfects[this.settings.openEffect].in,function(){i.settings.autoplayVideos&&i.slidePlayerPlay(n),i.trigger("slide_changed",{prev:c,current:l}),t(i.settings.afterSlideChange)&&i.settings.afterSlideChange.apply(i,[c,l])}):(a=this.settings.slideEffect,d=a!=="none"?this.settings.cssEfects[a].in:a,this.prevActiveSlideIndex>this.index&&this.settings.slideEffect=="slide"&&(d=this.settings.cssEfects.slideBack.in),g(n,d,function(){i.settings.autoplayVideos&&i.slidePlayerPlay(n),i.trigger("slide_changed",{prev:c,current:l}),t(i.settings.afterSlideChange)&&i.settings.afterSlideChange.apply(i,[c,l])})),setTimeout(function(){i.resize(n)},100),e(n,"current")}},{key:"slideAnimateOut",value:function(){if(!this.prevActiveSlide)return!1;var o,i,n=this.prevActiveSlide;s(n,this.effectsClasses),e(n,"prev"),o=this.settings.slideEffect,i=o!=="none"?this.settings.cssEfects[o].out:o,this.slidePlayerPause(n),this.trigger("slide_before_change",{prev:{index:this.prevActiveSlideIndex,slide:this.prevActiveSlide,slideNode:this.prevActiveSlide,slideIndex:this.prevActiveSlideIndex,slideConfig:r(this.prevActiveSlideIndex)?null:this.elements[this.prevActiveSlideIndex].slideConfig,trigger:r(this.prevActiveSlideIndex)?null:this.elements[this.prevActiveSlideIndex].node,player:this.getSlidePlayerInstance(this.prevActiveSlideIndex)},current:{index:this.index,slide:this.activeSlide,slideNode:this.activeSlide,slideIndex:this.index,slideConfig:this.elements[this.index].slideConfig,trigger:this.elements[this.index].node,player:this.getSlidePlayerInstance(this.index)}}),t(this.settings.beforeSlideChange)&&this.settings.beforeSlideChange.apply(this,[{index:this.prevActiveSlideIndex,slide:this.prevActiveSlide,player:this.getSlidePlayerInstance(this.prevActiveSlideIndex)},{index:this.index,slide:this.activeSlide,player:this.getSlidePlayerInstance(this.index)}]),this.prevActiveSlideIndex>this.index&&this.settings.slideEffect=="slide"&&(i=this.settings.cssEfects.slideBack.out),g(n,i,function(){var o=n.querySelector(".ginner-container"),e=n.querySelector(".gslide-media"),t=n.querySelector(".gslide-description");o.style.transform="",e.style.transform="",s(e,"greset"),e.style.opacity="",t&&(t.style.opacity=""),s(n,"prev")})}},{key:"getAllPlayers",value:function(){return this.videoPlayers}},{key:"getSlidePlayerInstance",value:function(e){var t="gvideo"+e,n=this.getAllPlayers();return!!(o(n,t)&&n[t])&&n[t]}},{key:"stopSlideVideo",value:function(e){if(d(e)){var t,n=e.querySelector(".gvideo-wrapper");n&&(e=n.getAttribute("data-index"))}console.log("stopSlideVideo is deprecated, use slidePlayerPause"),t=this.getSlidePlayerInstance(e),t&&t.playing&&t.pause()}},{key:"slidePlayerPause",value:function(e){if(d(e)){var t,n=e.querySelector(".gvideo-wrapper");n&&(e=n.getAttribute("data-index"))}t=this.getSlidePlayerInstance(e),t&&t.playing&&t.pause()}},{key:"playSlideVideo",value:function(e){if(d(e)){var t,n=e.querySelector(".gvideo-wrapper");n&&(e=n.getAttribute("data-index"))}console.log("playSlideVideo is deprecated, use slidePlayerPlay"),t=this.getSlidePlayerInstance(e),t&&!t.playing&&t.play()}},{key:"slidePlayerPlay",value:function(e){if(d(e)){var t,n=e.querySelector(".gvideo-wrapper");n&&(e=n.getAttribute("data-index"))}t=this.getSlidePlayerInstance(e),t&&!t.playing&&(t.play(),this.settings.autofocusVideos&&t.elements.container.focus())}},{key:"setElements",value:function(e){var t,s=this;this.settings.elements=!1,t=[],e&&e.length&&n(e,function(e,n){var i=new b(e,s,n),a=i.getConfig(),o=u({},a);o.slideConfig=a,o.instance=i,o.index=n,t.push(o)}),this.elements=t,this.lightboxOpen&&(this.slidesContainer.innerHTML="",this.elements.length&&(n(this.elements,function(){var e=h(s.settings.slideHTML);s.slidesContainer.appendChild(e)}),this.showSlide(0,!0)))}},{key:"getElementIndex",value:function(e){var t=!1;return n(this.elements,function(n,s){if(o(n,"node")&&n.node==e)return t=s,!0}),t}},{key:"getElements",value:function(){var e,s,o=this,t=[];return this.elements=this.elements?this.elements:[],!r(this.settings.elements)&&B(this.settings.elements)&&this.settings.elements.length&&n(this.settings.elements,function(e,n){var i=new b(e,o,n),a=i.getConfig(),s=u({},a);s.node=!1,s.index=n,s.instance=i,s.slideConfig=a,t.push(s)}),e=!1,s=this.getSelector(),s&&(e=document.querySelectorAll(this.getSelector())),e?(n(e,function(e,n){var i=new b(e,o,n),a=i.getConfig(),s=u({},a);s.node=e,s.index=n,s.instance=i,s.slideConfig=a,s.gallery=e.getAttribute("data-gallery"),t.push(s)}),t):t}},{key:"getGalleryElements",value:function(e,t){return e.filter(function(e){return e.gallery==t})}},{key:"getSelector",value:function(){return!this.settings.elements&&(this.settings.selector&&this.settings.selector.substring(0,5)=="data-"?"*[".concat(this.settings.selector,"]"):this.settings.selector)}},{key:"getActiveSlide",value:function(){return this.slidesContainer.querySelectorAll(".gslide")[this.index]}},{key:"getActiveSlideIndex",value:function(){return this.index}},{key:"getAnimationClasses",value:function(){var e,t,n=[];for(t in this.settings.cssEfects)this.settings.cssEfects.hasOwnProperty(t)&&(e=this.settings.cssEfects[t],n.push("g".concat(e.in)),n.push("g".concat(e.out)));return n.join(" ")}},{key:"build",value:function(){var t,s,r,d,u,m,f,p,i=this;if(this.built)return!1;u=document.body.childNodes,d=[],n(u,function(e){e.parentNode==document.body&&e.nodeName.charAt(0)!=="#"&&e.hasAttribute&&!e.hasAttribute("aria-hidden")&&(d.push(e),e.setAttribute("aria-hidden","true"))}),m=o(this.settings.svg,"next")?this.settings.svg.next:"",f=o(this.settings.svg,"prev")?this.settings.svg.prev:"",p=o(this.settings.svg,"close")?this.settings.svg.close:"",t=this.settings.lightboxHTML,t=t.replace(/{nextSVG}/g,m),t=t.replace(/{prevSVG}/g,f),t=t.replace(/{closeSVG}/g,p),t=h(t),document.body.appendChild(t),s=document.getElementById("glightbox-body"),this.modal=s,r=s.querySelector(".gclose"),this.prevButton=s.querySelector(".gprev"),this.nextButton=s.querySelector(".gnext"),this.overlay=s.querySelector(".goverlay"),this.loader=s.querySelector(".gloader"),this.slidesContainer=document.getElementById("glightbox-slider"),this.bodyHiddenChildElms=d,this.events={},e(this.modal,"glightbox-"+this.settings.skin),this.settings.closeButton&&r&&(this.events.close=c("click",{onElement:r,withCallback:function(e){e.preventDefault(),i.close()}})),r&&!this.settings.closeButton&&r.parentNode.removeChild(r),this.nextButton&&(this.events.next=c("click",{onElement:this.nextButton,withCallback:function(e){e.preventDefault(),i.nextSlide()}})),this.prevButton&&(this.events.prev=c("click",{onElement:this.prevButton,withCallback:function(e){e.preventDefault(),i.prevSlide()}})),this.settings.closeOnOutsideClick&&(this.events.outClose=c("click",{onElement:s,withCallback:function(e){!i.preventOutsideClick&&!a(document.body,"glightbox-mobile")&&!l(e.target,".ginner-container")&&!l(e.target,".gbtn")&&!a(e.target,"gnext")&&!a(e.target,"gprev")&&i.close()}})),n(this.elements,function(e,t){i.slidesContainer.appendChild(e.instance.create()),e.slideNode=i.slidesContainer.querySelectorAll(".gslide")[t]}),S&&e(document.body,"glightbox-touch"),this.events.resize=c("resize",{onElement:window,withCallback:function(){i.resize()}}),this.built=!0}},{key:"resize",value:function(){var t,n,i,r,c,l,u,h,m,f,p,g,v,b,j,y,w,O,x,C,E,k,d=arguments.length>0&&arguments[0]!==0[0]?arguments[0]:null,d=d||this.activeSlide;if(!d||a(d,"zoomed"))return;if(j=L(),n=d.querySelector(".gvideo-wrapper"),m=d.querySelector(".gslide-image"),i=this.slideDescription,c=j.width,l=j.height,c<=768?e(document.body,"glightbox-mobile"):s(document.body,"glightbox-mobile"),!n&&!m)return;u=!1,i&&(a(i,"description-bottom")||a(i,"description-top"))&&!a(i,"gabsolute")&&(u=!0),m&&(c<=768?k=m.querySelector("img"):u&&(C=i.offsetHeight,p=m.querySelector("img"),p.setAttribute("style","max-height: calc(100vh - ".concat(C,"px)")),i.setAttribute("style","max-width: ".concat(p.offsetWidth,"px;")))),n&&(f=o(this.settings.plyr.config,"ratio")?this.settings.plyr.config.ratio:"",f||(x=n.clientWidth,g=n.clientHeight,v=x/g,f="".concat(x/v,":").concat(g/v)),b=f.split(":"),t=this.settings.videosWidth,r=this.settings.videosWidth,_(t)||t.indexOf("px")!==-1?r=parseInt(t):t.indexOf("vw")!==-1?r=c*parseInt(t)/100:t.indexOf("vh")!==-1?r=l*parseInt(t)/100:t.indexOf("%")!==-1?r=c*parseInt(t)/100:r=parseInt(n.clientWidth),h=r/(parseInt(b[0])/parseInt(b[1])),h=Math.floor(h),u&&(l=l-i.offsetHeight),r>c||h>l||lr?(E=n.offsetWidth,y=n.offsetHeight,w=l/y,O={width:E*w,height:y*w},n.parentNode.setAttribute("style","max-width: ".concat(O.width,"px")),u&&i.setAttribute("style","max-width: ".concat(O.width,"px;"))):(n.parentNode.style.maxWidth="".concat(t),u&&i.setAttribute("style","max-width: ".concat(t,";"))))}},{key:"reload",value:function(){this.init()}},{key:"updateNavigationClasses",value:function(){var t=this.loop();s(this.nextButton,"disabled"),s(this.prevButton,"disabled"),this.index==0&&this.elements.length-1==0?(e(this.prevButton,"disabled"),e(this.nextButton,"disabled")):this.index===0&&!t?e(this.prevButton,"disabled"):this.index===this.elements.length-1&&!t&&e(this.nextButton,"disabled")}},{key:"loop",value:function e(){var e=o(this.settings,"loopAtEnd")?this.settings.loopAtEnd:null,e=o(this.settings,"loop")?this.settings.loop:e;return e}},{key:"close",value:function(){var i,o=this;if(!this.lightboxOpen){if(this.events){for(i in this.events)this.events.hasOwnProperty(i)&&this.events[i].destroy();this.events=null}return!1}if(this.closing)return!1;this.closing=!0,this.slidePlayerPause(this.activeSlide),this.fullElementsList&&(this.elements=this.fullElementsList),this.bodyHiddenChildElms.length&&n(this.bodyHiddenChildElms,function(e){e.removeAttribute("aria-hidden")}),e(this.modal,"glightbox-closing"),g(this.overlay,this.settings.openEffect=="none"?"none":this.settings.cssEfects.fade.out),g(this.activeSlide,this.settings.cssEfects[this.settings.closeEffect].out,function(){if(o.activeSlide=null,o.prevActiveSlideIndex=null,o.prevActiveSlide=null,o.built=!1,o.events){for(n in o.events)o.events.hasOwnProperty(n)&&o.events[n].destroy();o.events=null}var e,n,i=document.body;s(x,"glightbox-open"),s(i,"glightbox-open touching gdesc-open glightbox-touch glightbox-mobile gscrollbar-fixer"),o.modal.parentNode.removeChild(o.modal),o.trigger("close"),t(o.settings.onClose)&&o.settings.onClose(),e=document.querySelector(".gcss-styles"),e&&e.parentNode.removeChild(e),o.lightboxOpen=!1,o.closing=null})}},{key:"destroy",value:function(){this.close(),this.clearAllEvents(),this.baseEvents&&this.baseEvents.destroy()}},{key:"on",value:function(e,n){var s=arguments.length>2&&arguments[2]!==0[0]&&arguments[2];if(!e||!t(n))throw new TypeError("Event name and callback must be defined");this.apiEvents.push({evt:e,once:s,callback:n})}},{key:"once",value:function(e,t){this.on(e,t,!0)}},{key:"trigger",value:function(e){var s=this,o=arguments.length>1&&arguments[1]!==0[0]?arguments[1]:null,t=[];n(this.apiEvents,function(n,s){var i=n.evt,a=n.once,r=n.callback;i==e&&(r(o),a&&t.push(s))}),t.length&&n(t,function(e){return s.apiEvents.splice(e,1)})}},{key:"clearAllEvents",value:function(){this.apiEvents.splice(0,this.apiEvents.length)}},{key:"version",value:function(){return U}}]),i}();function de(){var t=arguments.length>0&&arguments[0]!==0[0]?arguments[0]:{},e=new T(t);return e.init(),e}return de}),jQuery.event.special.touchstart={setup:function(e,t,n){this.addEventListener("touchstart",n,{passive:!t.includes("noPreventDefault")})}},jQuery.event.special.touchmove={setup:function(e,t,n){this.addEventListener("touchmove",n,{passive:!t.includes("noPreventDefault")})}};function preloader(){$(".preloader").delay(100).fadeOut(10)}$(preloader),$(document).on("turbolinks:load",preloader),function(e){"use strict";e("#searchOpen").on("click",function(){e(".search-wrapper").addClass("open"),setTimeout(function(){e(".search-box").focus()},400)}),e("#searchClose").on("click",function(){e(".search-wrapper").removeClass("open")}),e(".tab-content").find(".tab-pane").each(function(){var t=e(this).closest(".code-tabs").find(".nav-tabs"),n=e(this).attr("title");t.append('
  • '+n+"
    • ")}),e(".code-tabs ul.nav-tabs").each(function(){e(this).find("li:first").addClass("active")}),e(".code-tabs .tab-content").each(function(){e(this).find("div:first").addClass("active")}),e(".nav-tabs a").click(function(t){t.preventDefault();var n=e(this).parent(),o=n.index(),s=e(this).closest(".code-tabs"),i=s.find(".tab-pane").eq(o);s.find(".active").removeClass("active"),n.addClass("active"),i.addClass("active")}),e(".collapse").on("shown.bs.collapse",function(){e(this).parent().find(".fas fa-plus").removeClass("fas fa-plus").addClass("fas fa-minus")}).on("hidden.bs.collapse",function(){e(this).parent().find(".fas fa-minus").removeClass("fas fa-minus").addClass("fas fa-plus")}),jQuery.extend(jQuery.easing,{easeInOutExpo:function(e,t,n,s,o){return t==0?n:t==o?n+s:(t/=o/2)<1?s/2*2**(10*(t-1))+n:s/2*(-(2**(-10*--t))+2)+n}}),e("#scrollTop").click(function(t){t.preventDefault(),e("html,body").animate({scrollTop:0},1500,"easeInOutExpo")}),e(".post-slider").slick({slidesToShow:1,slidesToScroll:1,autoplay:!0,dots:!1,arrows:!0,prevArrow:"",nextArrow:""}),e(".featured-post-slider").slick({slidesToShow:1,slidesToScroll:1,autoplay:!0,dots:!0,arrows:!0,vertical:!1,prevArrow:"",nextArrow:""}),e(".single-product-slider").slick({autoplay:!1,infinite:!0,arrows:!1,dots:!0,customPaging:function(t,n){var s=e(t.$slides[n]).data("image");return'product-img'}})}(jQuery)