在移动响应视图中居中图像

Question

我正在开发一个包含 Bootstrap 和 FontAwesome 的网站，其中包括可点击的图像和相交的超赞字体元素。结果，我想出了以下代码：

<!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 immages*/
             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>

现在，我正在尝试创建一个移动响应视图，其中的图像居中且彼此下方。然而，当我尝试将它居中时，它却把它放在右边而不是中间。

桌面视图中的按钮：

移动视图中的按钮：如您所见，它远非可选（黄色矩形）

问题是，如何让这些图片居中？

编辑：我的第一次尝试是 Bootstrap，但更改屏幕尺寸会使两个按钮彼此分离。

Answer 1

您的 .ebp_container { width: 300px}

好像有问题

如果你把它改成

.ebp_container {  width: 100%;  }

在您的媒体查询中，它应该如您所愿地工作

<!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 immages*/
             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%;
             
                 
             }

             .ebp_container { 
                width: 100%; 
            }

         
        
         }
     </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>

Answer 2

<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 immages*/
         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>

Answer 3

响应时您的宽度导致溢出。它设置为大于视口的宽度并且正在溢出。

您似乎还有一些 position:absolute 东西，这些东西似乎在很大程度上对于您的图标定位来说是不必要的。当它响应时，我已将其重置为基础，但我猜从代码角度来看，它在桌面上并不是很完美。

我会通过创建更准确地表示本地遇到的视觉问题的代码片段来更新您的问题，以确保每个人都能准确地看到问题。即包括您的图片参考和颜色。

<!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 immages*/
             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) {

.ebp_container {
   width: auto;
   text-align: center;
}

.ebp_pdf,
 .ebp_video {
  position: static;
  display:inline-block;
 width: auto;
}

             [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>

在移动响应视图中居中图像

Centering Images in Mobile Responsive View

html

css

bootstrap-4

font-awesome

center