CODEWITHSUNDEEP
html
newwebsitecreator
newwebsitecreator

Reputation: 25

How Do I Get My Gallery (3 Pictures) To Center?

I feel like I'm really close to get it but I'm not sure what I should do exactly. How can I get this gallery to be centered, rather than pushed to the right?

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

Any help is much appreciated! :)

Upvotes: 0

Views: 192

Answers (2)

teddcp
teddcp

Reputation: 1624

You can use the below style without using the bootstrap.

 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>

Upvotes: 1

Rohan Rao
Rohan Rao

Reputation: 2603

You can use Bootstrap class called d-flex which displays your container as a dynamic grid system, followed by just-content-center and align-items-center that arranges your container to the center of the page.

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

Hope this helps.

Upvotes: 2

Related Questions