Question

我刚开始探索CSS，并期待深入了解该语言。

我在项目中面临的一个问题是移动视图中的产品对齐。

网站 - http://klcl.com.my/product-listing/

在移动视图中，产品正在触摸屏幕的右侧。我希望他们能够居中。我尝试添加一个＆＃39; margin-right：15px＆＃39;它有效;但是，新的代码行也会影响页脚中的社交媒体图标。我猜是因为产品列表和图标都使用了＆＃39; .col-md-4＆＃39;类标签。

以下是代码：

<div class="col-md-9 product-listing-main">
   <div class="row">
     <?php 
       $args = array(
         'posts_per_page' => -1,
         'post_type' => 'product'
       );
       $query = new WP_Query($args);
       while ($query->have_posts()) :
         $query->the_post();
       ?>
       <div class="col-md-4">
          <figure>
          <a href="<?php the_permalink(); ?>"><img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID));?>" /></a>
          <figcation><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></figcation>
          </figure>
          </div>
         <?php
        endwhile;
        wp_reset_postdata();
        ?>
      </div>
     </div>

如何在不影响网站上任何其他元素的情况下将产品与中间对齐？任何帮助将不胜感激。

Answer 1

将此添加到您的css以重置之前的设置：

  .on-social{margin-right:initial !important;}

或

  .on-social{margin-right:0px !important;}

请考虑margin: 0 auto;以使元素居中。

Answer 2

在看了一下你的代码后，我发现你经常操纵bootstrap元素的填充（容器，col- * ......），这会导致混乱。尽量避免这种情况，一切运行正常。

调整一个元素的位置而不影响其他元素。在css

2 个答案: