gpt4 book ai didi

html - 垂直div居中

转载 作者:太空宇宙 更新时间:2023-11-04 09:14:32 24 4
gpt4 key购买 nike

我在尝试垂直对齐 div 时遇到了麻烦。我的目标是让 3 个 height: 100% 和 width:33% 的 div 有一个居中的内容 div。谁能帮忙?这是代码:

.wrapper {
height: 100%;
width: 100%;
}
.window {
width: 33%;
float: left;
background-color: #666;
}
.windowContent {
background-color: #000;
}
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>

<body>
<div class="wrapper">
<div class="window">
<div class="windowContent">
</div>
</div>

<div class="window">
<div class="windowContent">
</div>
</div>

<div class="window">
<div class="windowContent">
</div>
</div>

</div>

</body>

</html>

最佳答案

试试这个例子

<div class="wrapper">
<div class="window">
<div class="windowContent">
1
</div>
</div>

<div class="window">
<div class="windowContent">
2
</div>
</div>

<div class="window">
<div class="windowContent">
3
</div>
</div>

</div>

CSS

.wrapper
{
height: 100%;
width: 100%;
display: flex;
}

.window
{
width: 100%;
min-height: 200px;
background-color: #666;
display: flex;
align-items: center;
justify-content: center;
}

.windowContent
{
background-color: #000;
color: #fff;
}

演示 - https://jsfiddle.net/xa3v1c3o/

关于html - 垂直div居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41852805/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com