Question

我有一个div，其中包含一些包含图像的锚标签。有什么方法可以将div放在多个设备的中心，无论设备的宽度是多少？

以下是代码：

 <div class="jaffa">
       <a href="#">
         <img src="" >
         <span>sample text</span></a>
       <a href="#">
         <img src="" >
         <span>sample text</span></a>
       <a href="#">
         <img src="" >
         <span>sample text</span></a>
     </div>

每个锚标签都有固定的宽度和高度，根据屏幕的宽度，有时会有2个锚标签连续显示，有时会显示3.

这是我的css：

 @media(max-width:480){
  .jaffa a{
  width:200px;
  height:90px;
  padding:20px;
  }
  @media(min-width:481){
  .jaffa a{
  width:140px;
  height:90px;
  padding:20px;
  }

Answer 1

如果位置静态（默认），则必须使用margin:0 auto;否则使用left:50%; margin-left:-(half of the width of your div)

Answer 2

试试这个img {margin-left: auto; margin-right: auto;}无论宽度如何，这都会将图像准确地置于容器中间。

如果您遇到高度问题，您也可以尝试：

margin-top:auto; margin-bottom: auto;

如何在多个设备上居中div

2 个答案: