HTML怎么实现盒子居中和内容居中

本篇内容介绍了“HTML怎么实现盒子居中和内容居中”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

创新互联于2013年创立,是专业互联网技术服务公司,拥有项目成都做网站、成都网站制作网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元东港做网站,已为上家服务,为东港各地企业和个人服务,联系电话:13518219792

一、盒子模型练习

我们有个需求:

创建两个盒子,大盒子嵌套一个小盒子,大盒子是红色的,小盒子是蓝色的,并且小盒子在大盒子中是居中的。







    

    Title

    







    

HTML怎么实现盒子居中和内容居中

注意点:

(1)

注意点:如果两个盒子是嵌套关系,设置里面的盒子的外边距的话,外面的

盒子也会顶下来 ,即:仅有属性:

margin-left:100px;

margin-top:100px;

HTML怎么实现盒子居中和内容居中

 
   

解决方法:在外面的大盒子中添加一个border属性,因此在企业开发中,一般情况下如果需要控制嵌套关系盒子的距离,应该首先考虑padding,其次在考虑margin,因为margin本质上是用于控制兄弟关系之间的间隙的

(2)我们看到一个新的属性值

margin:100px auto

这个前面是距离,后面auto就会将小盒子进行居中,如果写成:margin:0 auto.那么只会在水平方向上进行居中,因此我们要计算好距离像素,写到属性值中。

二、text-align:center和margin:0 auto之间的区别

1.text-align:center;作用:设置盒子中的存储的文字/图片水平居中。

2.margin:0 auto;作用:让盒子自己水平居中。







    

    d116_box_center_and_content_center

    







    我是一个文字

    
          ?     

HTML怎么实现盒子居中和内容居中

“HTML怎么实现盒子居中和内容居中”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


分享名称:HTML怎么实现盒子居中和内容居中
分享网址:http://csdahua.cn/article/gjcopd.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

其他资讯