css3设置box-pack和box-align让div里面的元素垂直居中

最新推荐文章于 2023-10-11 15:04:07 发布
最新推荐文章于 2023-10-11 15:04:07 发布
阅读量1.9k 收藏
点赞数
分类专栏： HTML5+CSS3 文章标签： css3 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #container{
    display: box;
    display: -webkit-box;
    display: -moz-box;
    width:800px;
    height: 200px;
    border: 1px solid #ccc;
    -webkit-box-pack:center;
    -moz-box-pack:center;
    -webkit-box-align:center;
    -moz-box-align:center;
    }
    #div1{
    background: orange;
    }
    #div2{
    background: yellow;
    }
    #div3{
    background: green;
    }
    </style>
</head>
<body>



    <div id="container">
    <div id="div1">列1</div>
    <div id="div2">列2</div>
    <div id="div3">列3</div>
    </div>


</body>
</html>
见面时的呼吸都曾反复练习
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTTP与HTTPS协议
weixin_50640351的博客
05-02 873
HTTP协议与HTTPS协议 一、http与https的区别： 1、默认端口不同：http是80端口，https443端口； 2、安全系数不同：http采用的明文传输，无安全性可言， https采用ssl/tls加密传输，保证了很大程度的安全性； 3、连接方式不同： A）http连接简单，是无状态连接，即同一客户端发送的请求，在服务器端是没有上下文关系的。 因为标准的http协议指的是不包括cookies, session等机制的。 PS:cookies, session等机制是在无状态化的过程中，加入状态
[css]盒子水平垂直居中的6种方法
belloc_li的博客
02-17 1万+
让盒子水平垂直居中是前端很基础的知识，在前端的面试中也经常会考查到，今天我就整理总结一下盒子水平垂直居中的几种方法。 盒子的设定 父盒子：width: 400px; height: 500px; 子盒子：width: 100px; height: 100px; （当然也可以是其他数值，只是为了统一得到一个结果就提前给个设定） 预期结果 方法 1.定位法 利用子绝父相，给父盒子添加相对定位子盒子添加绝对定位 代码如下： <!DOCTYPE html> <html lang="en
http 和 https
qimingxinlei的博客
10-31 518
http 和 https 区别 1）http的协议端口号是80，htps的协议端口是443 2）http协议是以铭文的方式在网络中传输数据，而https协议传输的书数据是经过TLS加密后的，https具有更高的安全性。 3）https在tcp三次握手阶段之后，还需要进行ssl的handshake，协商加密使用的对称加密密匙。 4）https需要服务端申请证书，浏览器端安装相应的根证书。 https优点 1）https传输数据过程中使用密匙进行加密，所以安全性更高 2）https可以认证用户和服务器 http
CSS3中不熟悉的属性1：box-pack和box-align
juzipchy的博客
06-05 575
box-pack 定义和用法： box-pack 属性规定当框大于子元素的尺寸，在何处放置子元素。 该属性规定水平框中的水平位置，以及垂直框中的垂直位置。 语法： box-pack: start|end|center|justify; start: 对于正常方向的框，首个子元素的左边缘被放在左侧（最后的子元素后是所有剩余的空间） 对于相反方向的框，最后子元素的右边缘被放在右侧（首个子元
CSS总结div中的内容垂直居中的五种方法
qq_41425267的博客
11-03 2万+
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距（padding）法 另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如： p { padding:20px 0; }
HTTP与HTTPS的区别
热门推荐
转身
05-18 2万+
超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。 为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信
CSS的box-align属性控制子元素布局实例
09-24
在CSS3中，`box-align`和`box-pack`属性通常一起使用来实现子元素的水平和垂直居中。`box-pack`控制子元素在主轴方向（通常是水平方向）上的对齐方式。例如，`box-pack: center`将使子元素在水平方向上居中。 以下...
css3弹性布局-webkit-box的用法演示
11-04
在CSS3中，弹性布局（Flexbox）是一种强大的布局模式，允许开发者更加灵活地控制元素在容器中的排列、对齐和大小调整。在早期的浏览器实现中，WebKit浏览器（如Safari和Chrome）引入了一个实验性的前缀 `-webkit-box...
简述http和https区别
sinat_39049092的博客
10-29 5386
http协议和https协议的区别主要是：传输信息安全性不同、连接方式不同、端口不同、证书申请方式不同 一、传输信息安全性不同 http协议：是超文本传输协议，信息是明文传输。如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息。 https协议：是具有安全性的ssl加密传输协议，为浏览器和服务器之间的通信加密，确保数据传输的安全。 二、连接方式不同 http协议：http的连接很简单，是无状态的。 https协议：是由SSL＋HTTP协议构建的可进行加密传输、身份认证的网
盒子居中 方法
xtyxtyxtywq的博客
09-23 612
盒子居中 方法
css3 如何让div里面的元素垂直居中
zerofine的专栏
08-20 3632
以前处理垂直居中用的方法是设置div的height和line-height
http与https概述
橘猫吃不胖的博客
02-18 4789
http与https的区别1 背景2 基本概念3 区别4 工作原理4.1 HTTP工作原理4.2 HTTPS工作原理5 HTTPS优缺点5.1 优点5.2 缺点6 HTTP请求消息和响应消息6.1 请求消息6.2 响应消息 1 背景 超文本传输协议（HTTP协议）被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码
http协议与https协议的区别
fakerking的博客
07-31 256
http协议和https协议
如何实现一个盒子在区域内上下左右居中
最新发布
weixin_56095898的博客
10-11 490
实现一个盒子在区域内上下左右居中的三种方式
什么是HTTP协议和HTTPS协议，以及两者的区别
早睡早起长头发的博客
07-20 3040
http与https的区别 ①https协议需要到ca申请证书，一般免费证书很少，需要交费； ②http是超文本传输协议，信息是明文传输，https 则是具有安全性的ssl加密传输协议； ③http和https使用的是完全不同的连接方式用的端口也不一样,前者是80,后者是443； ④http的连接很简单,是无状态的； ⑤https协议是由ssl+http协议构建的可进行加密传输、身份认证的网络协议要比http协议安全。 ...
div中的内容垂直居中的五种方法
cetinlo的博客
05-28 2448
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距（padding）法 另一种方法和
box-align与box-pack的使用
Good_zwn的博客
08-24 959
参考： box-align：http://www.w3school.com.cn/cssref/pr_box-align.asp box-pack：http://www.w3school.com.cn/cssref/pr_box-pack.asp 注意： 需要对齐的元素的父元素dispaly的值必须为box box-align值为center时，子元素为垂直居中 box-pack 属性规...
http与https的简单比较
weixin_34067049的博客
12-27 358
一、概念 1、HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。2、HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。3、HTTPS协议的主要作用可以分...
CSS3弹性盒子模型探索：box-flex属性解析
此外，`box-flex`还与其他相关属性（如`box-align`、`box-pack`等）配合使用，实现更复杂的布局控制，比如元素的对齐方式和方向。 CSS3的`box-flex`属性是现代网页布局中的一个重要工具，它提高了网页设计的灵活性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值