您当时的方位:主页 > 作业笔记

处理text-align: center;无法居中和右对齐

2016-03-31  

 今天在修正网站内容页代码时遇到这样的问题:阶段P设置了text-align: center;居中对齐,可是显现作用一向靠左无法居中。

看看下面两个图片在文章中,第一个不能居中,第二个能够居中。

tupianjuzhong

在img中加了margin:0 auto;后就居中了


 
 
剖析:text-align: center;居中对齐是行内元素,所以在正常情况下阶段P里边的元素便是行内元素,居中是没有问题的。可是假如在CSS中设置了P{display:block;}和img {display:block;}特点,那么P和P中的图片便是一个块状元素块状元素咱们居中对齐要用margin:0 auto;
 
 
 

处理问题:

 
例:
 
  • 代码如下
  • <p style="text-align: center;" ><img src="dnzscomcn.jpg" /></p>
     
    <p>manbet常识与技能(www.codeforacause.net)学习经验之谈</p>
 
 
假如遇到dnzscomcn.jpg图片不能居中,咱们只需要去页面或许CSS页面中查找img {display:block;},将display:block;删去即可。或许咱们在界说img特点style="margin:0 auto;"即可。