我最近开始学习HTML5和CSS。我想到了一个网页。
<!DOCTYPE html>
<html lang="en">
<head>
<title>To Do List - Homepage</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="todo-summary-wrapper">
<div class="task-pending-today-wrapper">
<div class="task-pending-today-count-wrapper">
<p>10</p>
</div>
<div class="task-pending-today-text-wrapper">
<p>Tasks left for the day</p>
</div>
</div>
<div class="random-summary-wrapper">
<div class="random-summary-count-wrapper">
<p>7</p>
</div>
<div class="random-summary-text-wrapper">
<p>vertically align multi line text needs a better way to be done</p>
</div>
</div>
<div class="priority-list-summary-wrapper">
<div class="priority-list-pending-count-wrapper">
<p>2</p>
</div>
<div class="priority-list-pending-text-wrapper">
<p>priority tasks pending</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS 文档如下所示。
.todo-summary-wrapper {
display: flex;
flex-direction: row;
margin: 0 auto;
border: 0.2px white;
width: 75%;
border-radius: 10px;
-webkit-box-shadow: 5px 5px 5px .1px rgba(8, 8, 8, 0.158);
-moz-box-shadow: 5px 5px 5px .1px rgba(8, 8, 8, 0.158);
box-shadow: 5px 5px 5px .1px rgba(8, 8, 8, 0.158);
}
.todo-summary-wrapper div {
display: flex;
flex-direction: column;
margin: 0 auto;
border: red 1px solid;
border-radius: 10px;
width: 200px;
}
.todo-summary-wrapper > div > div {
justify-content: center;
align-content: center;
text-align: center;
height: 200px;
}
当我运行此代码时，对象没有垂直对齐(中间(。如果我删除.todo-summary-wrapper > div > div代码中的height: 200px;代码，我可以实现这一目标。但我想将高度固定为 200px。
阅读了一会儿后，我决定使用display: table;而不是display: flex;，因为它实现了中间文本的垂直对齐，但div 水平对齐。
.todo-summary-wrapper {
display: flex;
flex-direction: row;
margin: 0 auto;
border: 0.2px white;
width: 75%;
border-radius: 10px;
-webkit-box-shadow: 5px 5px 5px .1px rgba(8, 8, 8, 0.158);
-moz-box-shadow: 5px 5px 5px .1px rgba(8, 8, 8, 0.158);
box-shadow: 5px 5px 5px .1px rgba(8, 8, 8, 0.158);
}
.todo-summary-wrapper div {
display: table;
margin: 0 auto;
border: red 1px solid;
border-radius: 10px;
width: 200px;
}
.todo-summary-wrapper > div > div {
display: table-cell;
text-align: center;
vertical-align: middle;
height: 100px;
}
请有人可以在这里帮助我吗？
要垂直对齐对象，应为上边距和下边距指定一些值，而不是 0。
.todo-summary-wrapper {
margin: 50% 0;
}
现在，项目将在中心(垂直(对齐。