-
Notifications
You must be signed in to change notification settings - Fork 3
/
centering-in-css.html
80 lines (68 loc) · 8.25 KB
/
centering-in-css.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Kabir Shah">
<title>Centering In CSS | Blog of Kabir Shah</title>
<link id="favicon" rel="shortcut icon"/>
<link rel="alternate" type="application/json" title="Kabir Shah" href="/feed.json"/>
<link href="https://fonts.googleapis.com/css?family=Inconsolata&display=swap" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="/css/lib/grain.min.css"/>
<link rel="stylesheet" type="text/css" href="/css/styles.css"/>
<script>
(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,"script","https://www.google-analytics.com/analytics.js","ga");
ga("create", "UA-70792533-7", "auto");
ga("send", "pageview");
</script>
</head>
<body>
<div class="s-x-33 p-x-10 p-y-10 m-y-6">
<div class="s-x-i">
<a class="s-x-i plain" href="/">
<img src="/img/logo.png" alt="Personal Logo" class="s-y-8"/>
</a>
<h1 class="s-x-i">Centering In CSS</h1>
<p class="s-x-i">September 3, 2016</p>
</div>
<p class="s-x-i">Unfortunately, there is no built in support for centering in CSS, but there are some ways to do it. I will be talking about two of the most effective ways to do it.</p><h2 id="flexbox" class="s-x-i">Flexbox</h2><p class="s-x-i">Using flexbox is a clean, hack-free way to center elements. The only downside is browser support, don't use this if you need to support IE 10 and below.</p><p class="s-x-i">Say you have the following HTML:</p><pre class="s-x-i s-b-2 p-x-4 p-y-4"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token operator">=</span><span class="token string">"center"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Centered Content<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre><p class="s-x-i">You need to center everything <strong>within</strong> the <code class="s-b-2 p-x-2 p-y-2">div</code>. So you would apply the following styles to the <strong>parent element</strong>. Which is <code class="s-b-2 p-x-2 p-y-2">.center</code> in this case.</p><pre class="s-x-i s-b-2 p-x-4 p-y-4"><code><span class="token selector">.center</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token comment">/* activates flexbox */</span>
<span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token comment">/* align items vertically */</span>
<span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token comment">/* align items horizontally */</span>
<span class="token punctuation">}</span></code></pre><h2 id="table" class="s-x-i">Table</h2><p class="s-x-i">Using a table will require more code than flexbox, but will support many more browsers; this includes IE 6 and up!</p><p class="s-x-i">With the following HTML:</p><pre class="s-x-i s-b-2 p-x-4 p-y-4"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token operator">=</span><span class="token string">"center"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token operator">=</span><span class="token string">"cell"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token operator">=</span><span class="token string">"content"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Centered Content<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre><p class="s-x-i">You will need three containers:</p><ol>
<li><p class="s-x-i">One on the outside, representing a <code class="s-b-2 p-x-2 p-y-2">table</code></p></li><li><p class="s-x-i">A <code class="s-b-2 p-x-2 p-y-2">cell</code> inside of of the <code class="s-b-2 p-x-2 p-y-2">table</code>, this will be a <code class="s-b-2 p-x-2 p-y-2">table-cell</code></p></li><li><p class="s-x-i">A container for all of the centered content</p></li></ol>
<p class="s-x-i">Now, you can style them:</p><pre class="s-x-i s-b-2 p-x-4 p-y-4"><code><span class="token selector">.center</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> table<span class="token punctuation">;</span> <span class="token comment">/* make .center a table */</span>
<span class="token punctuation">}</span>
<span class="token selector">.cell</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> table-cell<span class="token punctuation">;</span> <span class="token comment">/* make table cell */</span>
<span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span> <span class="token comment">/* vertically align cell in the middle */</span>
<span class="token punctuation">}</span>
<span class="token selector">.content</span> <span class="token punctuation">{</span>
<span class="token property">margin-left</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token comment">/* the content's left side margin is auto (centering it) */</span>
<span class="token property">margin-right</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token comment">/* the content's right side margin is auto (centering it) */</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token comment">/* align any other text items in the center*/</span>
<span class="token comment">/* text-align: center; is optional */</span>
<span class="token punctuation">}</span></code></pre><p class="s-x-i">There, now you can center things supporting IE 6 and up.</p>
<div class="s-x-i m-x-5">
<p><a href="https://kabir.sh">Portfolio</a></p>
<p><a href="https://blog.kabir.sh">Blog</a></p>
<p><a href="https://twitter.com/kbrshah">Twitter</a></p>
<p><a href="https://github.com/kbrsh">GitHub</a></p>
</div>
</div>
<script type="text/javascript" src="/js/index.js"></script>
</body>
</html>