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?
1 answers
solution1
0 2019-11-29 14:11:58
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).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.