我觉得我真的很接近得到它，但我不确定我到底应该做什么。我怎样才能让这个画廊居中，而不是推到右边？<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>任何帮助深表感谢！:)
2 回答
千万里不及你
TA贡献1784条经验 获得超9个赞
您可以使用名为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">
<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>
ibeautiful
TA贡献1993条经验 获得超5个赞
您可以使用以下样式而不使用引导程序。
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>
- 2 回答
- 0 关注
- 99 浏览
添加回答
举报
0/150
提交
取消