css各样居中
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">居中是<span style="color: black;">咱们</span><span style="color: black;">运用</span>css来布局时常遇到的<span style="color: black;">状况</span>。<span style="color: black;">运用</span>css来进行居中时，有时一个属性就能搞定，有时则<span style="color: black;">必须</span><span style="color: black;">必定</span>的技巧<span style="color: black;">才可</span>兼容到所有浏览器，本文就居中的<span style="color: black;">有些</span>常用<span style="color: black;">办法</span>做个简单的介绍。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">注：本文所讲<span style="color: black;">办法</span>除了<span style="color: black;">尤其</span>说明外，都是兼容IE6+、谷歌、火狐等主流浏览器的。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">先<span style="color: black;">来讲</span>几种简单的、人畜<span style="color: black;">没</span>害的居中<span style="color: black;">办法</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1. 把margin设为auto</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">详细</span><span style="color: black;">来讲</span><span style="color: black;">便是</span>把要居中的元素的margin-left和margin-right都设为auto，此<span style="color: black;">办法</span>只能进行水平的居中，且对浮动元素或绝对定位元素<span style="color: black;">没</span>效。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2、<span style="color: black;">运用</span> text-align:center</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这个没什么好说的，只能对<span style="color: black;">照片</span>，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3、<span style="color: black;">运用</span>line-height让单行的文字垂直居中</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">把文字的line-height设为文字父容器的高度，适用于<span style="color: black;">仅有</span>一行文字的<span style="color: black;">状况</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4、<span style="color: black;">运用</span>表格</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span>你<span style="color: black;">运用</span>的是表格的话，那完全<span style="color: black;">不消</span>为<span style="color: black;">各样</span>居中问题而<span style="color: black;">懊恼</span>了，只要用到 td(<span style="color: black;">亦</span>可能会用到 th)元素的 align=”center” 以及 valign=”middle” 这两个属性就<span style="color: black;">能够</span>完美的处理它里面内容的水平和垂直居中问题了,<span style="color: black;">况且</span>表格默认的就会对它里面的内容进行垂直居中。<span style="color: black;">倘若</span>想在css中<span style="color: black;">掌控</span>表格内容的居中，垂直居中<span style="color: black;">能够</span><span style="color: black;">运用</span> vertical-align:middle，至于水平居中，貌似css中是<span style="color: black;">无</span>相对应的属性的,<span style="color: black;">然则</span>在IE6、7中<span style="color: black;">咱们</span><span style="color: black;">能够</span><span style="color: black;">运用</span>text-align:center来对表格里的元素进行水平居中，IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起<span style="color: black;">功效</span>，对块状元素<span style="color: black;">没</span>效。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-aae0a66befbc9fb389b5350955f4c86e_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-4a145c2cc327c8f029cfed50af4cbec3_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在ie6、7中<span style="color: black;">能够</span><span style="color: black;">经过</span>css的text-algin来<span style="color: black;">掌控</span>表格内容的水平方向的对齐，<span style="color: black;">没</span>论内容是行内元素还是块状元素都有效。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-58ec41b6e173fef543b4fc3ca098f74a_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">但在ie8+以及chrome、firefox等浏览器中的text-align:center对块状元素<span style="color: black;">没</span>效，只能用表格自有的align属性。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">5、<span style="color: black;">运用</span>display:table-cell来居中</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">针对</span><span style="color: black;">哪些</span>不是表格的元素，<span style="color: black;">咱们</span><span style="color: black;">能够</span><span style="color: black;">经过</span>display:table-cell 来把它模拟成一个表格单元格，<span style="color: black;">这般</span>就<span style="color: black;">能够</span>利用表格那很方便的居中特性了。例如：</p>
论坛外链网http://www.fok120.com/ 谢谢、感谢、感恩、辛苦了、有你真好等。 这篇文章真的让我受益匪浅，外链发布感谢分享！ 可以发布外链的网站 http://www.fok120.com/
页:
[1]