文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使我的画廊(3张图片)到中心？

问如何使我的画廊(3张图片)到中心？
EN

Stack Overflow用户

提问于 2020-03-24 03:55:12

回答 2查看 161关注 0票数 0

我觉得我真的很接近它，但我不确定我应该做什么。我怎样才能让这个画廊居中，而不是推到右边呢？

<figure class="wp-block-gallery columns-3 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://example.com/wp-content/uploads/example1-768x1024.jpg" alt="example" data-id="1343" data-full-url="https://example.com/wp-content/uploads/example1.jpg" data-link="https://example.com/example1/" class="wp-image-1343"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://example.com/wp-content/uploads/example2-576x1024.jpg" alt="example" data-id="1319" data-full-url="https://example.com/wp-content/uploads/example2.jpg" data-link="https://example.com/example2/" class="wp-image-1319"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://example.com/wp-content/uploads/example3-768x1024.jpg" alt="example" data-id="1330" data-full-url="https://example.com/wp-content/uploads/example3.jpg" data-link="https://example.com/example3/" class="wp-image-1330"/></figure></li></ul></figure>

如有任何帮助，将不胜感激！)

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-03-24 04:27:59

您可以使用以下样式的，而无需使用引导程序.

 ul {
        list-style-type: none;  

   }
   img{
      display: block;
      margin: 0 auto;
      width: 50%;
   }

 ul {
            list-style-type: none;  

       }
       img{
          display: block;
          margin:0 auto;
          width: 50%;
       }

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Estudo Navbar</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="style.css">

</head>
<body>
  <figure class="wp-block-gallery columns-3 is-cropped">
    <ul class="blocks-gallery-grid">
      <li class="blocks-gallery-item">
        <figure>
          <img src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80" alt="example" data-id="1343" 
          data-full-url="https://example.com/wp-content/uploads/example1.jpg" data-link="https://example.com/example1/" class="wp-image-1343"/>
        </figure>
     </li>
        
     <li class="blocks-gallery-item">
          <figure><img src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80" alt="example" data-id="1319" 
               data-full-url="https://example.com/wp-content/uploads/example2.jpg" data-link="https://example.com/example2/" class="wp-image-1319"/>
          </figure>
     </li>
     
     <li class="blocks-gallery-item">
          <figure><img src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80" alt="example" data-id="1330" 
               data-full-url="https://example.com/wp-content/uploads/example3.jpg" data-link="https://example.com/example3/" class="wp-image-1330"/>
          </figure>
     </li>
   </ul>
</figure>
</body>
</html>

票数 1

Stack Overflow用户

发布于 2020-03-24 04:07:33

您可以使用称为just-content-center d-flex的Bootstrap类，它将容器显示为一个动态网格系统，然后是将容器安排到页面中心的align-items-center和。

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="d-flex justify-content-center align-items-center">
  <figure class="wp-block-gallery columns-3 is-cropped">
    <ul class="blocks-gallery-grid">
      <li class="blocks-gallery-item">
        <figure><img src="https://example.com/wp-content/uploads/example1-768x1024.jpg" alt="example" data-id="1343" data-full-url="https://example.com/wp-content/uploads/example1.jpg" data-link="https://example.com/example1/" class="wp-image-1343" /></figure>
      </li>
      <li class="blocks-gallery-item">
        <figure><img src="https://example.com/wp-content/uploads/example2-576x1024.jpg" alt="example" data-id="1319" data-full-url="https://example.com/wp-content/uploads/example2.jpg" data-link="https://example.com/example2/" class="wp-image-1319" /></figure>
      </li>
      <li class="blocks-gallery-item">
        <figure><img src="https://example.com/wp-content/uploads/example3-768x1024.jpg" alt="example" data-id="1330" data-full-url="https://example.com/wp-content/uploads/example3.jpg" data-link="https://example.com/example3/" class="wp-image-1330" /></figure>
      </li>
    </ul>
  </figure>
</div>

希望这能有所帮助。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60824737

复制

相似问题

问如何使我的画廊(3张图片)到中心？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使我的画廊(3张图片)到中心？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使我的画廊(3张图片)到中心？
EN