/
path---2013-center-62440026b0977a5215c1.js.map
1 lines (1 loc) · 18.6 KB
/
path---2013-center-62440026b0977a5215c1.js.map
1
{"version":3,"sources":["webpack:///path---2013-center-62440026b0977a5215c1.js","webpack:///./.cache/json/2013-center.json"],"names":["webpackJsonp","460","module","exports","data","site","siteMetadata","title","subtitle","copyright","author","name","rss","email","github","markdownRemark","id","html","excerpt","fields","tagSlugs","frontmatter","tags","date","description","pathContext","slug"],"mappings":"AAAAA,cAAc,gBAERC,IACA,SAAUC,EAAQC,GCHxBD,EAAAC,SAAkBC,MAAQC,MAAQC,cAAgBC,MAAA,YAAAC,SAAA,YAAAC,UAAA,yBAAAC,QAA0FC,KAAA,KAAAC,IAAA,IAAAC,MAAA,oBAAAC,OAAA,gBAA0EC,gBAAmBC,GAAA,qGAAAC,KAAA,+gLAAszLC,QAAA,yIAAAC,QAAyKC,UAAA,6BAAwCC,aAAgBd,MAAA,iBAAAe,MAAA,cAAAC,KAAA,2BAAAC,YAAA,QAAsGC,aAAgBC,KAAA","file":"path---2013-center-62440026b0977a5215c1.js","sourcesContent":["webpackJsonp([12704411787241],{\n\n/***/ 460:\n/***/ (function(module, exports) {\n\n\tmodule.exports = {\"data\":{\"site\":{\"siteMetadata\":{\"title\":\"Step Over\",\"subtitle\":\"有趣的灵魂终会相遇\",\"copyright\":\"© All rights reserved.\",\"author\":{\"name\":\"周骅\",\"rss\":\"#\",\"email\":\"zhou--hua@163.com\",\"github\":\"zhouhua-js\"}}},\"markdownRemark\":{\"id\":\"/work/playground/zhouhua.site/src/pages/articles/2013/center.md absPath of file >>> MarkdownRemark\",\"html\":\"<p>网页中元素居中的需求很普遍，今天就要谈谈相对比较简单，使用场合更多的水平居中。</p>\\n<h2>行级元素居中</h2>\\n<hr>\\n<p>我们知道css中有一个text-align的属性来定义子元素的水平对齐，不过它仅对行级元素生效。一种思路就是我们将想要居中的元素规定成inline或inline-block元素。</p>\\n<div class=\\\"gatsby-highlight\\\">\\n <pre class=\\\"language-css\\\"><code><span class=\\\"token selector\\\">.parent</span><span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token property\\\">text-align</span><span class=\\\"token punctuation\\\">:</span> center<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">width</span><span class=\\\"token punctuation\\\">:</span>100%<span class=\\\"token punctuation\\\">;</span>\\n<span class=\\\"token punctuation\\\">}</span>\\n<span class=\\\"token selector\\\">.child</span><span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token property\\\">display</span><span class=\\\"token punctuation\\\">:</span> inline-block<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">width</span><span class=\\\"token punctuation\\\">:</span>200px<span class=\\\"token punctuation\\\">;</span>\\n<span class=\\\"token punctuation\\\">}</span>\\n</code></pre>\\n </div>\\n<div class=\\\"gatsby-highlight\\\">\\n <pre class=\\\"language-html\\\"><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 punctuation\\\">=</span><span class=\\\"token punctuation\\\">\\\"</span>parent<span class=\\\"token punctuation\\\">\\\"</span></span><span class=\\\"token punctuation\\\">></span></span>\\n <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 punctuation\\\">=</span><span class=\\\"token punctuation\\\">\\\"</span>child<span class=\\\"token punctuation\\\">\\\"</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 punctuation\\\">></span></span>\\n<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>div</span><span class=\\\"token punctuation\\\">></span></span>\\n</code></pre>\\n </div>\\n<div class=\\\"parent\\\" style=\\\"text-align: center\\\"><div class=\\\"child\\\" style=\\\"display: inline-block;\\\">我要居中</div></div>\\n<p>注意，inline-block在低版本IE和firefox中支持不佳，为了兼容低版本IE，我们需要给所有的inline-block元素加上一段hack：</p>\\n<div class=\\\"gatsby-highlight\\\">\\n <pre class=\\\"language-css\\\"><code> <span class=\\\"token selector\\\">.inline-block</span><span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token property\\\">display</span><span class=\\\"token punctuation\\\">:</span> -moz-inline-stack<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">display</span><span class=\\\"token punctuation\\\">:</span>inline-block<span class=\\\"token punctuation\\\">;</span>\\n *<span class=\\\"token property\\\">zoom</span><span class=\\\"token punctuation\\\">:</span>1<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">_zoom</span><span class=\\\"token punctuation\\\">:</span>1<span class=\\\"token punctuation\\\">;</span>\\n *<span class=\\\"token property\\\">display</span><span class=\\\"token punctuation\\\">:</span>inline<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">_display</span><span class=\\\"token punctuation\\\">:</span>inline<span class=\\\"token punctuation\\\">;</span>\\n<span class=\\\"token punctuation\\\">}</span>\\n</code></pre>\\n </div>\\n<h2>margin自适应居中</h2>\\n<hr>\\n<p>inline-block是一把双刃剑，虽然常常可以解决一些布局的难题，但兼容性问题很大。一方面建议开发者把上面我给出的hack代码放在css一个class中，如果在页面中要用到inline-block，则给这个元素加上这个class。不过不想用inline-block的话，还是有别的方法的，比如很多前端朋友都会用到的margin自适应居中。这是我见过最简单的方法，只需要给子元素设置左右margin为auto即可。原理很简单，当一个块级元素的左右margin为auto时，浏览器根据父元素和子元素的宽度计算出一个使其居中的左右margin。</p>\\n<div class=\\\"gatsby-highlight\\\">\\n <pre class=\\\"language-css css\\\"><code>.parent{\\n width:100%;\\n}\\n.child{\\n margin: 0 auto;\\n width: 100px;\\n}</code></pre>\\n </div>\\n<div class=\\\"gatsby-highlight\\\">\\n <pre class=\\\"language-html html\\\"><code><div class=\\\"parent\\\">\\n <div class=\\\"child\\\">我要居中</div>\\n</div></code></pre>\\n </div>\\n<div class=\\\"parent\\\" style=\\\"width: 100%;\\\"><div class=\\\"child\\\" style=\\\"margin: 0 auto; width: 100px;\\\">我要居中</div></div>\\n<p>注意，这个方法虽然很简单，但由于行级元素对margin不敏感，因而此方法仅能用于块元素，即<code>inline</code>，<code>inline-block</code>，甚至<code>inline-table</code>的元素无法用此方法实现水平居中。</p>\\n<h2>绝对定位</h2>\\n<hr>\\n<p>绝对定位也许是处理布局问题最有效的手段，但往往给人一种“暴力”的感觉。简单粗暴但高效的方法在编程时永远是最有价值的。那么绝对定位是如何做到水平居中的呢？我们知道，要对一个元素进行绝对定位，我们常常会规定它相对于relative元素的top、left、right、bottom中的一个或几个。很容易地，我们能想出，要让它能居中，我们可以设定 $left=(W-w)/2=W*50%-w*50%$，其中W为relative元素（如父元素）的宽，w为居中元素的宽。不过有一个问题：css中并不能进行这样的数值计算。不过这个问题有解，我们可以借助负margin值来解决这个问题，我们可以先设定<code>left: 50%</code>，这时候元素是偏向右的，我们还需要让它左移自己宽度的一半。假设自身宽度为200px，那么我们可以规定：<code>margin-left: -100px</code>，请特别注意这里的负号！</p>\\n<div class=\\\"gatsby-highlight\\\">\\n <pre class=\\\"language-css css\\\"><code>.parent{\\n width:100%;\\n position:relative;\\n}\\n.child{\\n position:absolute;\\n left:50%\\n margin-left:-50px;\\n width:100px;\\n}</code></pre>\\n </div>\\n<div class=\\\"gatsby-highlight\\\">\\n <pre class=\\\"language-html html\\\"><code><div class=\\\"parent\\\">\\n <div class=\\\"child\\\">我要居中</div>\\n</div></code></pre>\\n </div>\\n<div class=\\\"parent\\\" style=\\\"height: 30px; position: relative;\\\"><div class=\\\"child\\\" style=\\\"width: 100px; position: absolute; left: 50%; margin-left: -50px;\\\">我要居中</div></div>\\n<p>想必大家从我之前的说明里已经能看到这个方法的一点弊端了。对！这个方法要求我们必须先知道元素的宽度。对于动态的元素，如果我们无法事先得知元素的宽度，那么纯CSS无法解决这个问题，只能借助javascript获取宽度值后再更改margin-left的属性值。</p>\\n<style>\\n.parent{\\n width: 100%;\\n margin: 20px;\\n background: #ccc;\\n}\\n.child {\\n text-align: center;\\n}\\n</style>\",\"excerpt\":\"网页中元素居中的需求很普遍，今天就要谈谈相对比较简单，使用场合更多的水平居中。 行级元素居中 我们知道css中有一个text-align的属性来定义子元素的水平对齐，不过它仅对行级元素生效。一种思路就是我们将想要居中的元素规定成inline或inline-block…\",\"fields\":{\"tagSlugs\":[\"/tags/css/\",\"/tags/水平居中/\"]},\"frontmatter\":{\"title\":\"网页中元素实现水平居中的方法\",\"tags\":[\"CSS\",\"水平居中\"],\"date\":\"2013-07-01T22:12:31.000Z\",\"description\":null}}},\"pathContext\":{\"slug\":\"/2013/center/\"}}\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// path---2013-center-62440026b0977a5215c1.js","module.exports = {\"data\":{\"site\":{\"siteMetadata\":{\"title\":\"Step Over\",\"subtitle\":\"有趣的灵魂终会相遇\",\"copyright\":\"© All rights reserved.\",\"author\":{\"name\":\"周骅\",\"rss\":\"#\",\"email\":\"zhou--hua@163.com\",\"github\":\"zhouhua-js\"}}},\"markdownRemark\":{\"id\":\"/work/playground/zhouhua.site/src/pages/articles/2013/center.md absPath of file >>> MarkdownRemark\",\"html\":\"<p>网页中元素居中的需求很普遍，今天就要谈谈相对比较简单，使用场合更多的水平居中。</p>\\n<h2>行级元素居中</h2>\\n<hr>\\n<p>我们知道css中有一个text-align的属性来定义子元素的水平对齐，不过它仅对行级元素生效。一种思路就是我们将想要居中的元素规定成inline或inline-block元素。</p>\\n<div class=\\\"gatsby-highlight\\\">\\n <pre class=\\\"language-css\\\"><code><span class=\\\"token selector\\\">.parent</span><span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token property\\\">text-align</span><span class=\\\"token punctuation\\\">:</span> center<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">width</span><span class=\\\"token punctuation\\\">:</span>100%<span class=\\\"token punctuation\\\">;</span>\\n<span class=\\\"token punctuation\\\">}</span>\\n<span class=\\\"token selector\\\">.child</span><span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token property\\\">display</span><span class=\\\"token punctuation\\\">:</span> inline-block<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">width</span><span class=\\\"token punctuation\\\">:</span>200px<span class=\\\"token punctuation\\\">;</span>\\n<span class=\\\"token punctuation\\\">}</span>\\n</code></pre>\\n </div>\\n<div class=\\\"gatsby-highlight\\\">\\n <pre class=\\\"language-html\\\"><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 punctuation\\\">=</span><span class=\\\"token punctuation\\\">\\\"</span>parent<span class=\\\"token punctuation\\\">\\\"</span></span><span class=\\\"token punctuation\\\">></span></span>\\n <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 punctuation\\\">=</span><span class=\\\"token punctuation\\\">\\\"</span>child<span class=\\\"token punctuation\\\">\\\"</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 punctuation\\\">></span></span>\\n<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>div</span><span class=\\\"token punctuation\\\">></span></span>\\n</code></pre>\\n </div>\\n<div class=\\\"parent\\\" style=\\\"text-align: center\\\"><div class=\\\"child\\\" style=\\\"display: inline-block;\\\">我要居中</div></div>\\n<p>注意，inline-block在低版本IE和firefox中支持不佳，为了兼容低版本IE，我们需要给所有的inline-block元素加上一段hack：</p>\\n<div class=\\\"gatsby-highlight\\\">\\n <pre class=\\\"language-css\\\"><code> <span class=\\\"token selector\\\">.inline-block</span><span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token property\\\">display</span><span class=\\\"token punctuation\\\">:</span> -moz-inline-stack<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">display</span><span class=\\\"token punctuation\\\">:</span>inline-block<span class=\\\"token punctuation\\\">;</span>\\n *<span class=\\\"token property\\\">zoom</span><span class=\\\"token punctuation\\\">:</span>1<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">_zoom</span><span class=\\\"token punctuation\\\">:</span>1<span class=\\\"token punctuation\\\">;</span>\\n *<span class=\\\"token property\\\">display</span><span class=\\\"token punctuation\\\">:</span>inline<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">_display</span><span class=\\\"token punctuation\\\">:</span>inline<span class=\\\"token punctuation\\\">;</span>\\n<span class=\\\"token punctuation\\\">}</span>\\n</code></pre>\\n </div>\\n<h2>margin自适应居中</h2>\\n<hr>\\n<p>inline-block是一把双刃剑，虽然常常可以解决一些布局的难题，但兼容性问题很大。一方面建议开发者把上面我给出的hack代码放在css一个class中，如果在页面中要用到inline-block，则给这个元素加上这个class。不过不想用inline-block的话，还是有别的方法的，比如很多前端朋友都会用到的margin自适应居中。这是我见过最简单的方法，只需要给子元素设置左右margin为auto即可。原理很简单，当一个块级元素的左右margin为auto时，浏览器根据父元素和子元素的宽度计算出一个使其居中的左右margin。</p>\\n<div class=\\\"gatsby-highlight\\\">\\n <pre class=\\\"language-css css\\\"><code>.parent{\\n width:100%;\\n}\\n.child{\\n margin: 0 auto;\\n width: 100px;\\n}</code></pre>\\n </div>\\n<div class=\\\"gatsby-highlight\\\">\\n <pre class=\\\"language-html html\\\"><code><div class=\\\"parent\\\">\\n <div class=\\\"child\\\">我要居中</div>\\n</div></code></pre>\\n </div>\\n<div class=\\\"parent\\\" style=\\\"width: 100%;\\\"><div class=\\\"child\\\" style=\\\"margin: 0 auto; width: 100px;\\\">我要居中</div></div>\\n<p>注意，这个方法虽然很简单，但由于行级元素对margin不敏感，因而此方法仅能用于块元素，即<code>inline</code>，<code>inline-block</code>，甚至<code>inline-table</code>的元素无法用此方法实现水平居中。</p>\\n<h2>绝对定位</h2>\\n<hr>\\n<p>绝对定位也许是处理布局问题最有效的手段，但往往给人一种“暴力”的感觉。简单粗暴但高效的方法在编程时永远是最有价值的。那么绝对定位是如何做到水平居中的呢？我们知道，要对一个元素进行绝对定位，我们常常会规定它相对于relative元素的top、left、right、bottom中的一个或几个。很容易地，我们能想出，要让它能居中，我们可以设定 $left=(W-w)/2=W*50%-w*50%$，其中W为relative元素（如父元素）的宽，w为居中元素的宽。不过有一个问题：css中并不能进行这样的数值计算。不过这个问题有解，我们可以借助负margin值来解决这个问题，我们可以先设定<code>left: 50%</code>，这时候元素是偏向右的，我们还需要让它左移自己宽度的一半。假设自身宽度为200px，那么我们可以规定：<code>margin-left: -100px</code>，请特别注意这里的负号！</p>\\n<div class=\\\"gatsby-highlight\\\">\\n <pre class=\\\"language-css css\\\"><code>.parent{\\n width:100%;\\n position:relative;\\n}\\n.child{\\n position:absolute;\\n left:50%\\n margin-left:-50px;\\n width:100px;\\n}</code></pre>\\n </div>\\n<div class=\\\"gatsby-highlight\\\">\\n <pre class=\\\"language-html html\\\"><code><div class=\\\"parent\\\">\\n <div class=\\\"child\\\">我要居中</div>\\n</div></code></pre>\\n </div>\\n<div class=\\\"parent\\\" style=\\\"height: 30px; position: relative;\\\"><div class=\\\"child\\\" style=\\\"width: 100px; position: absolute; left: 50%; margin-left: -50px;\\\">我要居中</div></div>\\n<p>想必大家从我之前的说明里已经能看到这个方法的一点弊端了。对！这个方法要求我们必须先知道元素的宽度。对于动态的元素，如果我们无法事先得知元素的宽度，那么纯CSS无法解决这个问题，只能借助javascript获取宽度值后再更改margin-left的属性值。</p>\\n<style>\\n.parent{\\n width: 100%;\\n margin: 20px;\\n background: #ccc;\\n}\\n.child {\\n text-align: center;\\n}\\n</style>\",\"excerpt\":\"网页中元素居中的需求很普遍，今天就要谈谈相对比较简单，使用场合更多的水平居中。 行级元素居中 我们知道css中有一个text-align的属性来定义子元素的水平对齐，不过它仅对行级元素生效。一种思路就是我们将想要居中的元素规定成inline或inline-block…\",\"fields\":{\"tagSlugs\":[\"/tags/css/\",\"/tags/水平居中/\"]},\"frontmatter\":{\"title\":\"网页中元素实现水平居中的方法\",\"tags\":[\"CSS\",\"水平居中\"],\"date\":\"2013-07-01T22:12:31.000Z\",\"description\":null}}},\"pathContext\":{\"slug\":\"/2013/center/\"}}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/json-loader!./.cache/json/2013-center.json\n// module id = 460\n// module chunks = 12704411787241"],"sourceRoot":""}