<分区>
<分区>
我想将一个带有照片背景的 div 放在另一个 div 的中间。我尝试使用 display: flex; 和 align-items: center; 但它没有用。我将使用更多像这样的 div，如果我使用 display: flex;，它们将在页面顶部到底部连续放置在另一个之下。
HTML:
<div class="boxx">
<div class="box" style="background:
url('photos/acrilic/acrilic1.jpg') no-repeat center center ;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;">
</div></div>
CSS:
.boxx {
width: 350px;
height: 400px;
display: inline-block;
background: black;
}
.boxx .box {
margin: 0 auto;
width: 300px;
height: 300px;
}
最佳答案
( Documentation/ Tutorial )
试试这个:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d-flex {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
min-height: 100vh; /* optional */
}
.bg-red {
background-color: red;
}
.bg-blue {
background-color: blue;
}
</style>
</head>
<body>
<div class="d-flex bg-blue">
<div class="bg-red">LOREM</div>
<div class="bg-red">LOREM</div>
</div>
</body>
</html>
关于html - 将一个 div 放在另一个 div 的中间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47497610/