css_letter-spacing属性导致居中段落向左偏移的解决方法

本文转载自查看原文 2021-06-11 20:31 173 CSS3

通过letter-spacing属性设定字符间的间距时发现，原本居中的段落在设定字符间距后整体向左偏移。
给文字添加一个标签可以看到最后一个字符也同样添加了字符间距

一个比较hack的解决方法：使用text-indent将文字整体缩进，缩进距离与设定的letter-spacing值相同

            text-align: center;
            letter-spacing: 100px;
            text-indent: 100px;

添加如上代码，字体整体回到居中效果

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 C语言中段错误的解决方法Segmentation fault (core dumped) 在写论文的参考文献时，有的段落空格很大，有的段落则正常，原因及解决方法（wps） GPS地图坐标偏移及地图纠偏解决方法和代码

标签的文字居中解决方法
			           </a>
			       			       
			   
			       
			       
			           
			           <a class='list-group-item' href="/blog/8a37b81.html" title="nginx导致的session丢失的解决方法">
			           <i class="icon-fire"></i>
			           
			           nginx导致的session丢失的解决方法
			           </a>
			       			       
			   
			       
			       
			           
			           <a class='list-group-item' href="/blog/7eab241.html" title="在less中不能正常使用css3的calc属性的解决方法">
			           
			           <i class="icon-file"></i>
			           在less中不能正常使用css3的calc属性的解决方法
			           </a>
			       			       
			   
			       
			       
			           
			           <a class='list-group-item' href="/blog/6b18d21.html" title="js添加css属性导致:hover无效的解决办法">
			           <i class="icon-fire"></i>
			           
			           js添加css属性导致:hover无效的解决办法
			           </a>
			       			       
			   
			       
			       
			           
			           <a class='list-group-item' href="/blog/ea39731.html" title="【css】居中对齐方法">
			           
			           <i class="icon-file"></i>
			           【css】居中对齐方法
			           </a>
			       			       
			   
			       
			       
			           
			           <a class='list-group-item' href="/blog/2536591.html" title="CSS各种居中方法">
			           <i class="icon-fire"></i>
			           
			           CSS各种居中方法
			           </a>
			       			       
			   
			       
			       
			           
			           <a class='list-group-item' href="/blog/52c3541.html" title="DataGridView列标题(列标头)不能居中的解决方法">
			           <i class="icon-fire"></i>
			           
			           DataGridView列标题(列标头)不能居中的解决方法
			           </a>
			       			       
			   
			   
			   <div id="right_float_ad" class="ad">
				</div>
			</div>
			</div>
		</div>
	</div>
    <div class="clear"> </div>

<div class="fbar" style="z-index:100">
	<div class="span7" style="color:grey;font-size:12px;">
	</div>
	<div class="pull-right">
		<span><a href="http://beian.miit.gov.cn" rel="nofollow" target="_blank">粤ICP备18138465号</a>  </span><span>© 2018-2025 CODEPRJ.COM </span> 
	</div>
</div>
<script src="/js/code.js?version=20250504"></script>
<script>
   function buffer(a, b, c) {
	    var d;
	    return function() {
	        if (d) return;
	        d = setTimeout(function() {
	            a.call(this),
	            d = undefined
	        },
	        b)
	    }
	}

(function() {
	    function e() {
	        var d = document.body.scrollTop || document.documentElement.scrollTop;
	        d > b ? (a.className = "div1 div2", c && (a.style.top = d - b + "px")) : a.className = "div1"
	    }
	    var a = document.getElementById("float");
	    if (a == undefined) return ! 1;
	    var b = 0,
	    c, d = a;
	    while (d) b += d.offsetTop,
	    d = d.offsetParent;
	    c = window.ActiveXObject && !window.XMLHttpRequest;
	    if (!c || !0) window.onscroll = buffer(e, 50, this)
	})();

</script>

</body>
</html>