实现CSS居中的多种办法-外链论坛 - Powered by Discuz! Archiver

1fy07h 发表于 2024-6-30 09:39:18

实现CSS居中的多种办法

<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">居中在 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><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>给出这种场景：</p>

<div style="color: black; text-align: left; margin-bottom: 10px;"><div class="parent">
   <div class="child">
   DEMO
   </div>
   </div></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">其中在 class=child 这个 div 中的内容长度是不<span style="color: black;">必定</span>的，<span style="color: black;">此刻</span><span style="color: black;">必须</span>实现这个 div 的居中。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">水平居中</h2>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1.1 display: inline-block</h2>
<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> text-align: center，</p>这种<span style="color: black;">办法</span><span style="color: black;">能够</span>让 inline/inline-block/inline-table/inline/flex 居中。
<div style="color: black; text-align: left; margin-bottom: 10px;">.child {
   display:inline-block;
   /*子元素文字会继承居中，<span style="color: black;">因此呢</span>要在上面写上向左边居中*/
   text-align:left;
   }
   .parent {
   text-align:center;
   }</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当有多个 child div 的时候<span style="color: black;">倘若</span>设置 display: inline-block 的时候<span style="color: black;">必须</span><span style="color: black;">重视</span><span style="color: black;">每一个</span> div 之间会有缝隙，这不是什么 bug ，特性<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>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.去掉 HTML 中的空格。</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>去除掉 HTML 之间的空隙就好了。</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>了，<span style="color: black;">然则</span>这种<span style="color: black;">办法</span>总觉得写起来有点反人类。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><div class="parent">
   <div class="child">
   DEMO1</div
   ><div class="child">
   DEMO2</div
   ><div class="child">
   DEMO3</div>
   </div></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.<span style="color: black;">运用</span> margin 负值</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>。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.child {
   margin-right; -5px;
   }</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3.<span style="color: black;">运用</span> font-size: 0</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>将父 div 的 font-size 设为0 ，<span style="color: black;">而后</span>记得将子 div 的 font-size 属性设置回来<span style="color: black;">就可</span>。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent {
   font-size: 0;
   }
   .chilc {
   font-size: 16px;
   }</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4.<span style="color: black;">运用</span> letter-spacing <span style="color: black;">或</span> word-spacing</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent {
   letter-spacing: -5px;
   /*<span style="color: black;">或</span>*/
   word-spacing: -5px;
   }
   .chilc {
   letter-spacing: 0;
   /*<span style="color: black;">或</span>*/
   word-spacing: 0;
   }</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1.2 display:table</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">table 元素的宽度<span style="color: black;">亦</span>是跟着内容走，居中的时候加上 margin <span style="color: black;">就可</span>。兼容IE8。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span>不设置成table,设置成别的块级元素<span style="color: black;">亦</span><span style="color: black;">能够</span>，<span style="color: black;">然则</span>要强调设置宽度width，<span style="color: black;">否则</span>会拉伸成父元素的宽度。(<span style="color: black;">重视</span>加上 width 这种<span style="color: black;">办法</span>拓展性<span style="color: black;">欠好</span>，<span style="color: black;">倘若</span> child div 里面的内容很长的话可能超过设置的 width 的宽度)</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.child {
   display:table;
   margin:0 auto;
   }</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1.3 position: absolute</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">absolute 元素的宽度默认<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>的优点是居中的元素不会对其他元素产生影响脱离正常流</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent {
   position:relative;
   }
   .child{
   position:absolute; /*参照物是父容器*/
   left:50%;
   transform:translateX(-50%); /*百分比的参照物是<span style="color: black;">自己</span>*/</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1.4 dispaly: flex</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">只兼容IE</p>

m5k1umn 发表于 2024-11-10 07:43:52

软文发布论坛开幕式圆满成功。 http://www.fok120.com

1fy07h 发表于 6 天前

论坛的成果是显著的，但我们不能因为成绩而沾沾自喜。

页: [1]

外链论坛's Archiver

实现CSS居中的多种办法