-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathCSS-vertical-align.html
96 lines (93 loc) · 3.28 KB
/
CSS-vertical-align.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vertical Alignment</title>
<style>
.parent {
height: 400px;
width: 800px;
border: 2px solid purple;
margin: 1em;
padding: 0 1em;
}
.child {
color: royalblue;
font-size: 1.2rem;
position: relative;
top: 50%; /*50% moves the top of the child element to the center of the parent*/
transform: perspective(1px) translateY(-50%); /*move the child element up 50% of its height*/
/*
translateY function: it will reposition the elements vertically
perspective function: it will prevent blurriness;
*/
}
.parent2 {
height: 80vh;
width: 60vw;
border: 2px solid purple;
margin: 1em;
padding: 0 1em;
/*Center vertically*/
display: flex; /*display: grid;*/
justify-content: center;
align-items: center;
flex-direction: column; /*to make it top to bottom*/
/*^^^Easy method*/
}
.child2 {
border: 2px solid red;
}
.child2 img {
width: 300px;
height: 200px;
}
.div3 {
display: grid;
place-items: center; /*Easiest Method*/
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima nostrum
inventore nihil voluptatibus quod blanditiis explicabo cupiditate
maiores voluptate veniam quas id, itaque quis consectetur dolore libero
atque adipisci et. Error doloremque id consequatur praesentium sequi
eius ipsam corporis nihil! Modi in eligendi atque, nisi voluptatem
tempora enim accusantium. Amet temporibus reiciendis sed impedit
obcaecati recusandae et aut expedita officiis? Ipsa, quos. Delectus ea
rem quos vel magni ratione accusamus exercitationem amet ipsa ullam,
recusandae aut molestiae dolore quidem minus facilis quo dicta deserunt,
consectetur ducimus. Recusandae ipsa voluptatum cumque?
</div>
</div>
<div class="parent">
<div class="child">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima nostrum
inventore nihil voluptatibus quod blanditiis explicabo cupiditate
maiores voluptate veniam quas id, itaque quis consectetur dolore libero
atque adipisci et. Error doloremque id consequatur praesentium sequi
eius ipsam corporis nihil! Modi in eligendi atque, nisi voluptatem
tempora enim accusantium. Amet temporibus reiciendis sed impedit
obcaecati recusandae et aut expedita officiis? Ipsa, quos. Delectus ea
rem quos vel magni ratione accusamus exercitationem amet ipsa ullam,
recusandae aut molestiae dolore quidem minus facilis quo dicta deserunt,
consectetur ducimus. Recusandae ipsa voluptatum cumque?
</div>
</div>
<div class="parent2">
<div class="child2">
<img src="img/note.png" alt="" />
</div>
<div class="child2">
<img src="img/note.png" alt="" />
</div>
</div>
<div class="div3">
Hello
</div>
</body>
</html>