htmlcssbootstrap-4font-awesomecenter

Centering images in mobile responsive view


I'm working on a website with Bootstrap and FontAwesome that includes clickable images and font-awesome elements that intersect. As a result, I came up with the following code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <style>
        .tr {
             border: none;
         }

         .ebp_container {
             /* What you need */
             position: relative;
             /* the code below is only for this example */
             width: 300px;
             /*background-color: yellow;*/
             margin: 10px;
             padding: 20px;
         }

         .ebp_video {
             /* What you need */
             position: relative;
             z-index: 2;
             /* the code below is only for this example */
             width: 80px;
             /* height: 100px;*/
             display: flex;
             align-items: center;
             justify-content: center;
             text-align: center;
             color: var(--eniac-blue);
             cursor: pointer;
             /*Background*/
             border-radius: 15px;

             /*Centering the images*/
             display: block;
             margin-left: auto;
             margin-right: auto;
         }

             .ebp_video:hover {
                 /*    background-color: rgba(255,255,255,0.1);*/
                 opacity: 0.9
             }

         .ebp_pdf {
             /* What you need */
             position: absolute;
             top: 70px; /* change value to desired position */
             right: 90px; /* change value to desired position */
             z-index: 1;
             /* the code below is only for this example */
             width: 35px;
             
             display: flex;
             align-items: center;
             justify-content: center;
             text-align: center;
         }

             .ebp_pdf:hover {
                 opacity: 0.9
             }

         .ebp_wrapper {
             float: left;
             width: 25%;
             align-items: center;
         }

         @media screen and (max-width: 985px) {
             [class^="icon-"], [class*=" icon-"] {
                 display: inline-block;
                 width: 100%;
             }

             .ebp_wrapper {
                 float: none;
                 margin: auto;
                 width: 60%;
             }
         }
     </style>
    
    <div class="container" style="margin-top: 50px;">
        <div class="ebp_wrapper">
            <div class="ebp_container">
                <h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
                    <a href="#" target=”_blank”><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
                    <div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>
            </div>
        </div>

        <div class="ebp_wrapper">
            <div class="ebp_container">
                <h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
                <a href="#"><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
                <div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>
            </div>
        </div>

        <div class="ebp_wrapper">
            <div class="ebp_container">
                <h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
                <a href="#"><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
                <div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>
            </div>
        </div>

        <div class="ebp_wrapper">
            <div class="ebp_container">
                <h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
                <a href="#"><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
                <div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>
            </div>
        </div>
</div>
  
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Right now, I'm attempting to create a mobile responsive view with the images centered and below each other. When I try to center it, however, it puts it to the right rather than in the middle.

The buttons in desktop view:

enter image description here

The buttons in mobile view: as you can see it is far from the optional (The yellow rectangle)

enter image description here

The question is, how could I center these images?

Edit: my first attempt was with Bootstrap, but changing the screen size takes away the two buttons from each other.


Solution

  • <style>
               
        .tr {
             border: none;
         }
    
         .ebp_container {
             /* What you need */
             position: relative;
             /* the code below is only for this example */
             width: 300px;
             /*background-color: yellow;*/
             margin: 10px;
             padding: 20px;
         }
    
     
    
    
         .ebp_video {
             /* What you need */
             position: relative;
             z-index: 2;
             /* the code below is only for this example */
             width: 80px;
             /* height: 100px;*/
             display: flex;
             align-items: center;
             justify-content: center;
             text-align: center;
             color: var(--eniac-blue);
             cursor: pointer;
             /*Background*/
             border-radius: 15px;
    
    
    
             /*Centering the images*/
             display: block;
           margin-left: auto;
             margin-right: auto;
         }
    
    
             .ebp_video:hover {
                 /*    background-color: rgba(255,255,255,0.1);*/
                 opacity: 0.9
             }
    
    
    
    
    
    
         .ebp_pdf {
             /* What you need */
           
             position: absolute;
             top: 70px; /* change value to desired position */
             right: 90px; /* change value to desired position */
             z-index: 1;
             /* the code below is only for this example */
             width: 35px;
             
             display: flex;
             align-items: center;
             justify-content: center;
             text-align: center;
         }
    
             .ebp_pdf:hover {
                 opacity: 0.9
             }
    
    
         .ebp_wrapper {
             float: left;
             width: 25%;
             align-items: center;
         }
    
    
         @media screen and (max-width: 985px) {
    
    
             [class^="icon-"], [class*=" icon-"] {
                 display: inline-block;
                 width: 100%;
             }
    
    
    
    
             .ebp_wrapper {
                     width: 100%;
    text-align: center;
             
                 
             }
             
             .ebp_container {
    margin: auto;
             }
         
        
         }
     </style>