gpt4 book ai didi

html - 在完美的中间对齐两个元素

转载 作者:行者123 更新时间:2023-11-28 02:38:39 24 4
gpt4 key购买 nike

我是 CSS 的新手并且一直在学习它。

我似乎无法弄清楚如何使 Div 中的 2 个元素彼此完美地垂直对齐。我已经阅读了很多很多文章,但我仍然无法理解我做错了什么。

我已附上我的代码 - 你的帮助将对我的学习之旅有很大帮助。

谢谢!

h1 {
color: green;
}

* {
font-family: 'Roboto', sans-serif;
}


}
.center {}
.container1 {
width: auto;
display: flex;
padding: 10px;
height: auto;
}
.box-1 {
padding: 10px;
margin: 2px;
border: 2px solid;
display: flex;
flex: 33%;
}
.box-2 {
border: 2px solid;
margin: 2px;
display: flex;
order: 1;
flex: 33%;
}
.box-3 {
margin: 2px;
border: 2px solid;
display: flex;
order: 2;
flex: 33%;
}
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<body>
<div class="container1">
<div class="box-1">
<div class="center">
<h1>I am box number 1</h1>
<img src="https://placekitten.com/g/400/303" alt="Cute pupies">
</div>

</div>
<div class="box-2">
<h1>I am box number 2</h1>
</div>

<div class="box-3">
<h2>I am box number 3</h2>
</div>

</div>


</body>

</html>

最佳答案

要垂直对齐盒子的内容,您需要在它们的 CSS 中添加 align-items: center

关于html - 在完美的中间对齐两个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45658099/

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