I am using Chris Coyier's method for vertically centering an element with unknown height/width within another div of unknown height and width, found here (http://css-tricks.com/centering-in-the-unknown/).
I'm using the method of adding the pseudo ghost element, and it works great. In fact I've used it several times in the past with no issues. My problem this time is the container div that is being centered has an h2 inside it. If the text in the h2 is wider than the parent div, instead of wrapping like it should, it kicks the whole div down below the div that it was previously centered in. It then proceeds to wrap as normal. I can't for the life of me get the text to wrap in place. This is only an issue for one of the boxes on full-screen, but the actual site is responsive so when scaled down most of the boxes will have text that needs to wrap.
I know the code is at the moment almost completely unsemantic. I will fix that later, but for now am just trying to get it to work. Let me know if I didn't explain well enough. In the provided example, the box that is having an issue is the third one on the top row. Hover over the boxes to see intended and broken behavior. Any help at all with this would be greatly appreciated. Below is a link to the code pen. Thanks in advance!
It's something to do with the margin-right: -0.25em; property in the below code.
.hoover-box span:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
If you set it to 0.5em, it works, but without delving too deep into understanding how the whole centering in the unknown tut works I can't really tell you what to set it at as a whole.