189 8069 5689

html怎么实现盒子整体向下移动

这篇文章主要介绍“html怎么实现盒子整体向下移动”,在日常操作中,相信很多人在html怎么实现盒子整体向下移动问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”html怎么实现盒子整体向下移动”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

从网站建设到定制行业解决方案,为提供做网站、网站设计服务体系,各种行业企业客户提供网站建设解决方案,助力业务快速发展。成都创新互联将不断加快创新步伐,提供优质的建站服务。

一、已知大小盒子;左右居中

1、   使用定位,左右拉取方法:

html:

css:

.box{width: 300px;height: 300px;border: 1px solid orange;position: relative;}

.child{width: 100px;height: 100px;border: 1px solid blue;position:absolute;left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;}

2、使用margin:auto,方法:

html:

css:

.box{width: 300px;height: 300px;border: 1px solid red;position: relative;}

.child{width: 100px;height: 100px;border: 1px solid green;position:absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;}

二、未知大小盒子左右居中,

1、使用位移方法,兼容性较低,移动端慎用

html:

css:

.box{width: 300px;height: 300px;border: 1px solid red;position: relative;}

.child{width:auto;border: 1px solid green;position:absolute;left: 50%;top: 50%;transform:translate(-50%,-50%);-webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);}

2、组合使用display:table-cell和vertical-align、text-align,使父元素内的所有行内元素水平垂直居中(内部div设置display:inline-block即可)。

html:

css:

.cell {

display: table-cell;

vertical-align: middle;

text-align: center;

width: 240px;

height: 180px;

border:1px solid #666;

}

3、用弹性布局实现垂直左右居中

html:

css:

*{

margin: 0;

padding: 0;

}

.wrap{

width: 100px;

height: 100px;

border: 1px solid #000;

margin: 3.125em auto;

display: flex;

justify-content: center;

align-items: center;

}

.in{

width: 10px;

height: 10px;

background: #000;

border-radius: 50%;

}

display:flex; 设置.wrap为弹性布局

justify-content:center;定义项目在主轴(水平方向)上居中对齐

align-items:center;定义项目在交叉轴(垂直方向)上居中对齐

img元素再div中居中对齐:

第一种方法:

第一步:在img标签后面添加一个span元素

第二步:为这几个元素设置样式

1.把#div1元素设置text-align:center

2.把添加的元素span转化为行内块元素(display:inline-block),并且设置vertical-align:middle

3.为img元素设置vertical-align:middle。

完成以上操作之后,这个Img元素在#div1中就是垂直居中的了,这种方法的兼容性等比较好,唯一的缺点可能就是要在元素后面添加一个元素

(注意:这个元素最好是span元素,如果是div元素的话,在低版本ie下有兼容问题)

第二种方法:

这种方法利用了css3的新特性

为#div1设置display:flex;vertical-align:middle;align-items:middle。

这种方法的缺点就是只要不支持css3的浏览器,那就不会起作用了。

到此,关于“html怎么实现盒子整体向下移动”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


当前题目:html怎么实现盒子整体向下移动
文章网址:http://cdxtjz.com/article/ghsdos.html

其他资讯