英文:
Bootstrap 5 Center image
问题
我尝试通过给父级div添加类justify-content-center和text-center来水平居中一张图片。
这对文本有效，但是图片仍然保持在左侧，而不是居中。我该如何解决这个问题？
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.thumbnail {
cursor: pointer;
height: 10em;
width: 10em;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: content-box;
}
.thumbnail > img {
max-height: 10em;
max-width: 10em;
}
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row justify-content-md-center">
<div class="col col-md-4 d-flex justify-content-center text-center">
<a href="/characters/pine">
<div class="thumbnail align-text-bottom text-center">
<img class="center-block" src="https://media.gettyimages.com/id/157615990/photo/lasagna.jpg?s=612x612&w=gi&k=20&c=ue-VP7TbzbfT-KUHdhUz5T9CPBGteCiTESjiqA8CVHw=">
</div>
<div>Pineapple Lasagna Coleslaw</div>
</a>
</div>
</div>
<!-- end snippet -->
英文:
I tried centering an image horizontally my giving the parent div the class justify-content-center as well as text-center.
This worked for any text, however the image remains to the left, rather than centered. How do I fix this?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.thumbnail {
cursor: pointer;
height: 10em;
width: 10em;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: content-box;
}
.thumbnail > img {
max-height: 10em;
max-width: 10em;
}
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row justify-content-md-center">
<div class="col col-md-4 d-flex justify-content-center text-center">
<a href="/characters/pine">
<div class="thumbnail align-text-bottom text-center">
<img class="center-block" src="https://media.gettyimages.com/id/157615990/photo/lasagna.jpg?s=612x612&w=gi&k=20&c=ue-VP7TbzbfT-KUHdhUz5T9CPBGteCiTESjiqA8CVHw=">
</div>
<div>Pineapple Lasagna Coleslaw</div>
</a>
</div>
</div>
<!-- end snippet -->
答案1
得分: 2
图片已经正确定位，但具有类名.thumbnail的<div>定位在父锚点的左侧。只需将mx-auto添加到这个<div>以使其居中。
<div class="thumbnail align-text-bottom text-center mx-auto"><!-- 在这里添加 mx-auto -->
<img class="center-block" src="https://media.gettyimages.com/id/157615990/photo/lasagna.jpg?s=612x612&w=gi&k=20&c=ue-VP7TbzbfT-KUHdhUz5T9CPBGteCiTESjiqA8CVHw=">
</div>
请注意，我只翻译了您提供的内容，并添加了注释。
英文:
The image is positioned correctly but the div with the class .thumbnail is positioned to the left of the parent anchor. Just add mx-auto to this div to center it.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.thumbnail {
cursor: pointer;
height: 10em;
width: 10em;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: content-box;
}
.thumbnail > img {
max-height: 10em;
max-width: 10em;
}
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row justify-content-md-center">
<div class="col col-md-4 d-flex justify-content-center text-center">
<a href="/characters/pine">
<div class="thumbnail align-text-bottom text-center mx-auto"><!-- added mx-auto to this -->
<img class="center-block" src="https://media.gettyimages.com/id/157615990/photo/lasagna.jpg?s=612x612&w=gi&k=20&c=ue-VP7TbzbfT-KUHdhUz5T9CPBGteCiTESjiqA8CVHw=">
</div>
<div>Pineapple Lasagna Coleslaw</div>
</a>
</div>
</div>
<!-- end snippet -->
答案2
得分: 2
这是因为缩略图的宽度本身与图像的精确宽度相同，所以它是居中的，但不如您希望的宽。将缩略图的宽度更改为100％，以继承其父元素的宽度，图像将正确居中。
英文:
That's because the thumbnail width itself is the exact width of the image, so it's centered but not as wide as you want it to be. Change the width of the thumbnail to 100% so it inherits the width of its parents and the image will center properly.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.thumbnail {
cursor: pointer;
height: 10em;
width: 100%;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: content-box;
outline: 1px solid red;
}
.thumbnail > img {
max-height: 10em;
max-width: 10em;
}
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row justify-content-md-center">
<div class="col col-md-4 d-flex justify-content-center text-center">
<a href="/characters/pine">
<div class="thumbnail align-text-bottom text-center">
<img class="center-block" src="https://media.gettyimages.com/id/157615990/photo/lasagna.jpg?s=612x612&w=gi&k=20&c=ue-VP7TbzbfT-KUHdhUz5T9CPBGteCiTESjiqA8CVHw=">
</div>
<div>Pineapple Lasagna Coleslaw</div>
</a>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论