猿问

如何将我的画廊（3 张图片）移至中心？

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


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


任何帮助深表感谢！:)


慕慕森
浏览 100回答 2
2回答

千万里不及你

您可以使用名为d-flex的 Bootstrap 类，它将容器显示为动态网格系统，然后使用just-content-center和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">&nbsp; <figure class="wp-block-gallery columns-3 is-cropped">&nbsp; &nbsp; <ul class="blocks-gallery-grid">&nbsp; &nbsp; &nbsp; <li class="blocks-gallery-item">&nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="blocks-gallery-item">&nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="blocks-gallery-item">&nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul>&nbsp; </figure></div>
0

ibeautiful

您可以使用以下样式而不使用引导程序。&nbsp;ul {&nbsp; &nbsp; &nbsp; &nbsp; list-style-type: none;&nbsp;&nbsp;&nbsp; &nbsp;}&nbsp; &nbsp;img{&nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; &nbsp; width: 50%;&nbsp; &nbsp;}&nbsp;ul {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; list-style-type: none;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;img{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin:0 auto;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 50%;&nbsp; &nbsp; &nbsp; &nbsp;}<!DOCTYPE html><head>&nbsp; <meta charset="utf-8">&nbsp; <title>Estudo Navbar</title>&nbsp; <meta name="description" content="">&nbsp; <meta name="viewport" content="width=device-width, initial-scale=1">&nbsp; <link rel="stylesheet" href="reset.css">&nbsp; <link rel="stylesheet" href="style.css"></head><body>&nbsp; <figure class="wp-block-gallery columns-3 is-cropped">&nbsp; &nbsp; <ul class="blocks-gallery-grid">&nbsp; &nbsp; &nbsp; <li class="blocks-gallery-item">&nbsp; &nbsp; &nbsp; &nbsp; <figure>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data-full-url="https://example.com/wp-content/uploads/example1.jpg" data-link="https://example.com/example1/" class="wp-image-1343"/>&nbsp; &nbsp; &nbsp; &nbsp; </figure>&nbsp; &nbsp; &nbsp;</li>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;<li class="blocks-gallery-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;data-full-url="https://example.com/wp-content/uploads/example2.jpg" data-link="https://example.com/example2/" class="wp-image-1319"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </figure>&nbsp; &nbsp; &nbsp;</li>&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;<li class="blocks-gallery-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;data-full-url="https://example.com/wp-content/uploads/example3.jpg" data-link="https://example.com/example3/" class="wp-image-1330"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </figure>&nbsp; &nbsp; &nbsp;</li>&nbsp; &nbsp;</ul></figure></body></html>
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答