[英]How to align the elements in a div of fixed height align vertically?
I have started learning HTML5 and CSS recently.我最近开始学习 HTML5 和 CSS。 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. 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;
}
When i run this code, the objects are not aligned vertically (middle).当我运行此代码时,对象未垂直对齐(中间)。 I can achieve this if I remove the height: 200px;
如果我删除height: 200px;
我可以实现这一点height: 200px;
code in the .todo-summary-wrapper > div > div
code. .todo-summary-wrapper > div > div
代码中的代码。 But I want to fix the height as 200px.但我想将高度固定为 200px。
After reading a bit, I decided to use display: table;
看了一会儿,我决定使用display: table;
instead of display: flex;
而不是display: flex;
as it achieved the vertically aligning the text in the middle, but the div gets aligned horizontally.因为它实现了在中间垂直对齐文本,但 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;
}
Please could someone help me here?请问有人可以在这里帮助我吗?
To align objects vertically, you should give margin-top and margin-bottom some values, not 0.要垂直对齐对象,您应该给 margin-top 和 margin-bottom 一些值,而不是 0。
.todo-summary-wrapper {
margin: 50% 0;
}
Now the items will be aligned in the center (vertically).现在项目将在中心(垂直)对齐。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.