How to center caption who sibling element is rotated 45 degs

Question

I have this slider here. The image is skewed to around 45deg. below is the HTML for the whole block:

<a href="#" class="home-slider-item gallery_item">
    <div class="home-slider-inner">
        <img src="images/b-3.jpg" alt="">
        <div class="caption-box-background">
        </div>
    </div>
    <div class="caption-box">
        <i class="fa fa-android "></i>
        <p>Phychological<br> Consultation</p>
    </div>
</a>

The transform is applied on .home-slider-inner

-webkit-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
    -moz-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
    -ms-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
    transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
    border-right: 5px solid orange;
    overflow: hidden;
    position: relative;
    transform-origin: 0 100%;

So as you can see below the caption is not centered:

.

As of now i am applying a negative margin-left to the caption box to make the text look centered , but this solution does't work well on all screen sizes and needs to be added on many resolutions. So how can i center the the caption box to the image thats been skewed ?

One solution that dynamic solution i came up with is to calculate the width of the skew and then apply a negative margin to the caption box of:

  margin-left:  width of skew / 2;

Again i am not sure how to about doing this , i just think this is a possible solution. Can somebody guide me as to how can i go about centering this caption box without using hacky negatice margin-left !

P.S. since transforms make text look blurred , i had to write the caption as a separate child of the parent a, so if somebody answers this question , the use-case for the solution will be pretty universal.

Answer 1

The best solution would be to make the skew take place where the caption is. This way, it's horizontal alignment won't be disturbed.

I believe that this will happen aproximately here:

.home-slider-inner {
     transform-origin: 0 calc(50vh - 100px);
}

But any way, you can adapt it to your exact needs.