提问人：dododdo 提问时间：9/4/2023 最后编辑：corn on the cobdododdo 更新时间：9/4/2023 访问量：43
照片居中 [复制]
Centering a photo [duplicate]
问：
嘿，我不确定如何将这张照片居中。正如你所看到的，它略微偏移，我想并排做一些带有休息的div并添加照片，但不幸的是它们并没有完全居中。
我将不胜感激一些关于如何在 css 文件中很好地居中图像的未来建议。
.Photos {
color: black;
display: table;
width: 100%;
height: 450px;
}
.photo1 {
display: inline-block;
width: 25%;
height: 450px;
background-size: cover;
margin-left: 30px;
background-image: url(https://optimagas.com/blog/bl-content/uploads/pages/e931fad50039f497fa1b5438c6cd89c9/gazziemny.jpg);
}<section class="Photos">
<div class="photo1">fsgfsd</div>
</section>答：
-1赞
Jafran Hasan
9/4/2023
#1
只需使用 flex 将元素内的内容对齐到居中即可
.Photos {
color: black;
display: flex;
justify-content: center;
height: 450px;
}
您也可以使用保证金做同样的事情
.Photos {
color: black;
margin: 0 auto;
height: 450px;
}
0赞
samran feli
9/4/2023
#2
使用 background-position： center;
.Photos {
color: black;
display: table;
width: 100%;
height: 450px;
}
.photo1 {
display: inline-block;
width: 25%;
height: 450px;
background-size: cover;
margin-left: 30px;
background-image: url(https://optimagas.com/blog/bl-content/uploads/pages/e931fad50039f497fa1b5438c6cd89c9/gazziemny.jpg);
background-position: center;
}<section class="Photos">
<div class="photo1">fsgfsd</div>
</section>
-1赞
Hesam B
9/4/2023
#3
用：
.Photos {
color: black;
display: flex;
justify-content: center;
align-item: center;
width: 100%;
height: 450px;
}
.photo1 {
display: inline-block;
background-position: center center;
background-size: cover;
background-image: url(https://optimagas.com/blog/bl-content/uploads/pages/e931fad50039f497fa1b5438c6cd89c9/gazziemny.jpg);
width: 25%;
height: 450px;
}<section class="Photos">
<div class="photo1">fsgfsd</div>
</section>
-1赞
Sandeepa_Dilshan
9/4/2023
#4
使用 Flex 或 grid，
.Photos {
color: black;
display: table;
width: 100%;
height: 450px;
text-align: center; /* Center the content horizontally */
}
.photo1 {
display: inline-block;
width: 25%;
height: 450px;
background-size: cover;
background-image: url(https://optimagas.com/blog/bl-content/uploads/pages/e931fad50039f497fa1b5438c6cd89c9/gazziemny.jpg);
margin: 0 auto; /* Center the div horizontally */
}
评论