How to align the elements in a div of fixed height align vertically?

Question

I have started learning HTML5 and CSS recently. I have a webpage in mind.

<!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>

The CSS document is given below.

.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;
}

When i run this code, the objects are not aligned vertically (middle). I can achieve this if I remove the height: 200px; code in the .todo-summary-wrapper > div > div code. But I want to fix the height as 200px.

After reading a bit, I decided to use display: table; instead of display: flex; as it achieved the vertically aligning the text in the middle, but the div gets aligned horizontally.

.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;
}

Please could someone help me here?

Thank you so much. It worked. I wonder what the difference is between align-content and align-items — Anirudh Murali, Nov 29 '19 at 14:11
You can find here https://stackoverflow.com/questions/27539262/whats-the-difference-between-align-content-and-align-items — Awais, Nov 29 '19 at 14:18

score 0 · Answer 1 · answered Nov 29 '19 at 14:11

0

To align objects vertically, you should give margin-top and margin-bottom some values, not 0.

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

Now the items will be aligned in the center (vertically).

answered Nov 29 '19 at 14:11

Hosein Shendabadi

352
2
12

How to align the elements in a div of fixed height align vertically?

1 Answers1