Front-End-Stream/positionAllCenter.html at master · Kurtis987/Front-End-Stream · GitHub

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
<!DOCTYPE html>
<html>
<head>
	<title>All Center</title>
	<style type="text/css">
		#container {
			margin-right: auto;
			margin-left: auto;
			width: 600px;
			height: 400px;
			background-color: #AA4639;
			padding: 10px;
			border-radius: 10px;
			font-size: 0px;
			position: relative;
			top: 200px;
		}
		.box {
			box-sizing: border-box;
			width: 220px;
			height: 150px;
			background-color: #81BBC9;
			margin: 10px;
			display: inline-block;
			position: absolute;
			/*switched to absolute because relative bases
			off of where element would line up and it would
			be too hard to judge. absolute bases off of the
			relative parent */
			text-align: center;
			color: black;
			font-size: 16px;
			padding: 59px 0px; /*vertical align text */
			border-radius: 10px;
		}
		#box1 {
			top: 125px;
			left: 190px;
		}
		#box2 {
			top: 125px;
			left: 190px;
		}
		#box3 {
			top: 125px;
			left: 190px;
		}
		#box4 {
			top: 125px;
			left: 190px;
		}
		h1 {
			margin: 0;
		}
	</style>
</head>
<body>
	<div id="container">
		<div class="box" id="box1"><h1>1</h1></div>
		<div class="box" id="box2"><h1>2</h1></div>
		<div class="box" id="box3"><h1>3</h1></div>
		<div class="box" id="box4"><h1>4</h1></div>
	</div>
</body>
</html>