如何对齐固定高度的div中的元素垂直对齐？

Question

我最近开始学习 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;
}

当我运行此代码时，对象未垂直对齐（中间）。 如果我删除height: 200px;我可以实现这一点height: 200px; .todo-summary-wrapper > div > div代码中的代码。 但我想将高度固定为 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;
}

请问有人可以在这里帮助我吗？

Answer 1

要垂直对齐对象，您应该给 margin-top 和 margin-bottom 一些值，而不是 0。

.todo-summary-wrapper {
    margin: 50% 0; 
}

现在项目将在中心（垂直）对齐。

如何对齐固定高度的div中的元素垂直对齐？

问题描述

1 个解决方案

解决方案1
0 2019-11-29 14:11:58

如何对齐固定高度的div中的元素垂直对齐？

问题描述

1 个解决方案

解决方案1 0 2019-11-29 14:11:58

解决方案1
0 2019-11-29 14:11:58