Hello @davidgaz,
Thank you for using Vertical Center, and for posting in the support forums. I’m happy to help you get it working. ??
Let’s say you’ve got some HTML like this:
<div class="vc-target-wrapper">
<div class="vc-target">This inner div is what we want to vertically center.</div>
</div>
The selector that you’d enter on the settings page would be .vc-target. If the inner div had id="vc-target" rather than class="vc-target" then the selector would be #vc-target. You can use any arbitrary selector here, it doesn’t have to be vc-target. You could do id="target" and then the selector would be #target but the point is that the selector you want to use should match the child element that you want to vertically center relative to its parent.
So in the above example, if we entered .vc-target as a selector on the settings page the plugin would do this: “Look for the element that matches the selector .vc-target, calculate its height, then go one level up to find its parent element, then calculate the parent’s height, then subtract the child height from the parent height and divide by two, then apply any offset, then apply the result as margin-top to the child element.”
The essential pieces are the right selector to match the child element you want to vertically center and the child element being wrapped in an immediate parent element that it should be centered relative to. This also means that the parent element should always be taller than the child element, because otherwise the child element has nothing to center itself relative to, so in the example above we would need to have a height set on .vc-target-wrapper that was greater than the height of .vc-target in order to see any vertical centering.
I hope this information helps. If you send me a link to the page on your site where you’re trying to get it working and explain which element you want to be vertically centered, I can take a look and respond with what selector you should be using.
-Braad
