I am trying to center a font-awesome icon over an image in bootstrap 3.

Here is the image code contained in a div:

<div id="quickVideo">
    <a data-fancybox href=";color=54b3e4" class="adminDemoVideo">
        <img src="~/Images/..." class="img-responsive">
    </a>
</div>

I could do that using ::before on div element but the problem here is that it is not responsive by default.

.adminDemoVideo::before {
    font-family: 'FontAwesome';
    content: '\f04b';
    margin-top: 1.35em;
    margin-left: 2.8em;
    color: white;
    z-index: 1000;
    font-size: 50px !important;
    position: absolute;
    padding-bottom: 3px;
    padding-top: 3px;
    padding-left: 25px;
    padding-right: 15px;
    background-color: rgba(23, 35, 34, 0.75);
    border-radius: 5px 5px 5px 5px;
}

Here is how it looks like in desktop display size:

When I turn it into mobile or tablet view size it just get distorted due to margin etc just like below:

Is there any way how to fix it without knowing the screen size ? It does not matter for me if the solution is in css or javascript or jquery.

Hope this is not duplicate but did not find any proper solution here...

Thanks in advance.

I am trying to center a font-awesome icon over an image in bootstrap 3.

Here is the image code contained in a div:

<div id="quickVideo">
    <a data-fancybox href="https://player.vimeo./video/153113362?autoplay=1&color=54b3e4" class="adminDemoVideo">
        <img src="~/Images/..." class="img-responsive">
    </a>
</div>

I could do that using ::before on div element but the problem here is that it is not responsive by default.

.adminDemoVideo::before {
    font-family: 'FontAwesome';
    content: '\f04b';
    margin-top: 1.35em;
    margin-left: 2.8em;
    color: white;
    z-index: 1000;
    font-size: 50px !important;
    position: absolute;
    padding-bottom: 3px;
    padding-top: 3px;
    padding-left: 25px;
    padding-right: 15px;
    background-color: rgba(23, 35, 34, 0.75);
    border-radius: 5px 5px 5px 5px;
}

Here is how it looks like in desktop display size:

When I turn it into mobile or tablet view size it just get distorted due to margin etc just like below:

Is there any way how to fix it without knowing the screen size ? It does not matter for me if the solution is in css or javascript or jquery.

Hope this is not duplicate but did not find any proper solution here...

Thanks in advance.

• javascript
• jquery
• css
• twitter-bootstrap
• font-awesome

• how about using percentages in margin and padding ? – bhansa Commented Apr 11, 2017 at 18:12
• 1 have you tried playing with the top and left properties? something like top: calc(50% - width) and left: calc(50% - width) where width would be the width of your icon? – philr Commented Apr 11, 2017 at 18:12
• I tried that with calc function too. I managed to fix it for a specific display size but when it turned to desktop mode again it became distorted. I tried something like that left: calc(50% - 10em); but did not fix the problem for all sizes because when the bootstrap resizes it ruins everything :( – Rey Commented Apr 11, 2017 at 18:15
• calc() is a little inflexible in this case. translate() would be a better option. Set it once and forget it. The centered element can be any width/height and still center without having to redeclared calc() values for various meida queries or updating it. – hungerstar Commented Apr 11, 2017 at 18:28
• 1 Yeap this was the right answer, thanks a lot @hungerstar :) you saved me a lot of work. Cheers – Rey Commented Apr 11, 2017 at 18:34

1 Answer 1

This is a mon overlay question. The typical answer is use absolute positioning with translate inside a relative positioned parent.

• Make sure the parent has position: relative; so the absolute positioned overlay element doesn't end up somewhere where you don't want it. We're containing the overlay by doing this.
• Apply position: absolute; to the overlay element. Apply 50% to left and top. This gets the top left corner of the overlay element to the center of the parent.
• Use transform: translate( -50%, -50% ); to move the overlay up and to the left 50% of it's width and height. Now the center of the overlay is at the center of the parent.

@import url( 'https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css' );
@import url( 'https://maxcdn.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css' );

.adminDemoVideo {
  position: relative;
  display: inline-block;
}
.adminDemoVideo::before {
    content: '\f04b';
    z-index: 5;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate( -50%, -50% );
    padding: 3px 15px 3px 25px;
    color: white;
    font-family: 'FontAwesome';
    font-size: 50px !important;
    background-color: rgba(23, 35, 34, 0.75);
    border-radius: 5px 5px 5px 5px;
}

<a href="https://player.vimeo./video/153113362?autoplay=1&color=54b3e4" class="adminDemoVideo">
  <img src="http://placehold.it/1200x800/fc0" class="img-responsive">
</a>

Note that the image that the anchor is wrapping will create a small amount of white space that is left for a descender in text so it will technically not be 100% vertically centered. If this is an issue you can remove this by setting the image to display: block;.