div标签不设置width的话默认是100%吗

div标签不设置width的话默认是100%吗

如果我把div设置一个固定的宽度,里面的p设置50%,然后不设置margin:0 auto,而是设置align:center,这样为什么不可以实现居中效果呢

<div><p></p></div>

正在回答

登陆购买课程后可参与讨论,去登陆

3回答

同学你好,应该是老师没有看明白同学的意思QAQ, 你的理解是对的哦。另外,选择器理解的也是对的,选择器直接加空格,就表示后代选择器。例如 div  p ,则表示选择div的后代p。伪类选择器也是一样的,之前的同学说的没有问题哦。

祝学习愉快~

好帮手慕夭夭 2020-08-19 13:51:00

同学你好,问题解答如下:

1.理解的是不对的。margin:0 auto才是让元素在父容器中居中,而text-align 属性规定元素中的文本的水平对齐方式。所以text-align: center让p里面的文本在p中居中,这里再重新记一下。

2.   区别参考如下:

(1)text-align是css样式,如果写在元素标签中,需要放在style中。align是元素的属性,直接放在元素标签中。示例:

http://img1.sycdn.imooc.com//climg/5f3cbb8d090eaec503800057.jpg

http://img1.sycdn.imooc.com//climg/5f3cbb9e09495abf02930070.jpg

(2)作用是,text-align是设置文本对齐方式,也可以设置行内元素(内联元素)对齐方式。对块元素不起居中作用。例如上面的例子中,给div设置文本居中,p是块元素不会居中的。但是p会继承父元素的text-align样式(文本相关的样式子元素都可以基础,例如字体颜色,大小等),所以p里面的文本会居中。

align是设置元素中的内容对齐方式的,和text-align相似。区别就是可以让块元素居中,所以上面第二个代码示例中,p和文本都可以居中。自己可以练习一下,在浏览器查看效果,就能直观的理解它们的区别了:

http://img1.sycdn.imooc.com//climg/5f3cbd7d09f27b9f10370295.jpg

但是注意align属性的兼容性不好,推荐使用text-align代替align。如果是块元素设置居中,可以使用margin:0 auto。

祝学习愉快~

  • 提问者 樱桃小团子 #1
    谢谢老师回答,但是我发现我上一条回复发的理解好像和老师解释的是一样的逻辑啊,是我这次又理解错了吗还是上条回复说的太绕了老师一下没看过来啊QAQ。 理解的是比如div包着p包着a,给p设置,显示效果是a在p里面的位置,而不是p在div里的位置。 另外还有个问题是关于伪类选择器的,之前做练习的时候 <style type=text/css> .p1 :visited{ color: pink; } </style> <p class="p1"> <a href="#"></a> </p> 这串代码我设置的时候在伪类选择器前面加了空格,然后有效果了,同学说这是因为相当于后代选择器了对吗
    2020-08-19 19:18:47
好帮手慕夭夭 2020-08-18 17:08:11

同学你好,问题解答如下:

1.div宽度默认相对父元素100%显示。例如在body中写一个div,body宽度默认相对浏览器100%显示,那么div宽度也是100%。如果body宽度手动改为1000px,那么这个div默认宽度也是1000px。

2.设置 text-align: center是让p里面的内容在p中居中。而p元素设置了宽度50%,它本身宽度就不是相对浏览器100%显示的,所以内容虽然在p里面居中了,但是在整个页面上看,没有水平居中。

http://img1.sycdn.imooc.com//climg/5f3b98dc09bb272d03400314.jpg

文字在p中是居中的,但是p的宽度本身比页面宽度小,所以内容没有在页面中居中:

http://img1.sycdn.imooc.com//climg/5f3b9965091892a800000000.jpg

文字想要在页面中居中,光给div设置margin:0 auto是不够的,如下:

设置margin:0 auto是让div在页面中居中了,但是因为p的宽度是父元素宽度的一半,文字虽然在p中居中,但是在div中没有居中。即相对整个页面来看,文字依旧无法居中。

http://img1.sycdn.imooc.com//climg/5f3b99d109eb983a18810199.jpg

只有把p的宽度50%去掉,让它默认与父元素div宽度相同,文字就真正居中了:

http://img1.sycdn.imooc.com//climg/5f3b9a6809b1dabe19050202.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快~


  • 提问者 樱桃小团子 #1
    给某个元素设置textalign居中,不是让这个元素居中在上一个元素里,而是让这个元素里的内容居中在本元素中吗。 还有textalign和align有什么区别哇
    2020-08-19 11:55:29
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师