css中按钮怎么在div居中
程序员文章站
2022-03-12 17:53:23
...
方法:1、给div元素添加“display:flex”样式,设置div元素为弹性布局样式;2、给div元素添加“align-items:center;justify-content:center”样式,设置div内按钮元素水平垂直居中即可。
本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。
css中按钮怎么在div居中
我们可以通过display:flex;属性将div元素设置为弹性布局,用来为div元素提供最大的灵活性。
align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。
justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
示例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width:200px; height:200px; border:1px solid #000; display:flex; justify-content:center; align-items:center; } </style> </head> <body> <div><button>按钮</button></div> </body> </html>
输出结果:
(学习视频分享:css视频教程)
以上就是css中按钮怎么在div居中的详细内容,更多请关注其它相关文章!
推荐阅读
-
在IE与FF中如何居中的css写法
-
css中absolute设置问题和如何让div居中
-
Adobe Illustrator中怎么让对象在画布居中?AI居中的教程
-
css+div布局中的垂直居中
-
在Excel中怎么录制宏以设置标题跨列居中的宏为例附演示动画
-
DIV+CSS在不同浏览器中的表现_html/css_WEB-ITnose
-
在div中的img左侧总会出现一条竖线_html/css_WEB-ITnose
-
Div在浏览器中居中显示_html/css_WEB-ITnose
-
在IE与FF中如何居中的css写法
-
求大神,怎么在网页中单击登录的按钮的时候出现一个小的登录窗口。_html/css_WEB-ITnose