我覺(jué)得我真的很接近得到它，但我不確定我到底應(yīng)該做什么。我怎樣才能讓這個(gè)畫(huà)廊居中，而不是推到右邊？<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 回答
千萬(wàn)里不及你
TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超9個(gè)贊
您可以使用名為d-flex的 Bootstrap 類，它將容器顯示為動(dòng)態(tài)網(wǎng)格系統(tǒng)，然后使用just-content-center和align-items-center將容器排列到頁(yè)面的中心。
<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貢獻(xiàn)1993條經(jīng)驗(yàn) 獲得超6個(gè)贊
您可以使用以下樣式而不使用引導(dǎo)程序。
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 關(guān)注
- 136 瀏覽
添加回答
舉報(bào)
0/150
提交
取消