如何對齊固定高度的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