div里面内容水平居中(div居中之div水平居中)
大家好,乐天来为大家解答以下的问题,关于div里面内容水平居中,div居中之div水平居中这个很多人还不知道,现在让我们一起来看看吧!
1、实现div下只有一个子div的水平居中办法如下:.continer{height:100px;width:100px;background-color:aqua;text-align: center;//内联元素,使用text-align属性,可以修改对齐方式}.child{display: inline;//将子div设置为内联元素}我是子div2、实现div下只有多个子div的水平居中,思路是在多个子div外面再加一个div(假设命名为inner),同时inner设置为水平居中margin:0 auto,然后将多个子div设置在同一行,同时水平居中。
2、代码如下:.continer{height:100px;width:500px;background-color:aqua;text-align: center;}.inner{margin:0 auto;text-align: center;background-color:chartreuse}.child{display: inline-block;vertical-align: top;background-color: coral}我是子div1我是子div2我是子div3扩展资料:使元素水平居中的几种方法:如果是内联元素,比如span,img,a,input等,直接使用text-align:center2、如果是块级元素,比如h1-h6标题元素,div,p,form,section等,方法如下:1)父元素使用margin:0 auto2)将块级元素设置为内联元素,使用display:inline;或者disply:inline-block;3、使用flex布局,代码如下:.box {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */width: 1000px;height: 600px;border: 1px solid red;}.inner {width: 300px;height: 200px;background-color: red;}
本文分享完毕,希望对大家有所帮助。