- 所在位置：
- 首页 >
- 编程技术 >
- CSS/HTML >
- CSS中让按钮在div居中的方法有什么
CSS中让按钮在div居中的方法有什么
Admin 2022-05-28 群英技术资讯 1213 次浏览
这篇文章主要讲解了“CSS中让按钮在div居中的方法有什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS中让按钮在div居中的方法有什么”吧！方法：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中让按钮在div居中的方法有什么"的内容，大家可以关注群英网络的其它相关文章。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
CSS Sprite有哪些应用场景，Sprite优缺点是什么
这篇文章主要介绍了详解CSS Sprite雪碧图的应用，CSS雪碧图该方法是将多个小图标和背景图像合并到一张图片上，非常具有实用价值，需要的朋友可以参考下
-
用div实现自制滚动条的方法步骤是什么
这篇文章主要介绍了详解如何用div实现自制滚动条,滚动条是浏览器中最常见的组件了。想要学习如何自制滚动条的方法，需要了解的朋友可以参考下
-
HTML5搜索框提示文字输入时消失的效果怎样实现
H5之前要实现这个功能还要用到JS，H5出来之后新增加了placeholder属性，有了这个属性就就能轻松实现这个功能。定义和用法placeholder属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。注释：placeholder属性适用于以下的<input>类型：text,search,url,tele
-
HTML中怎么实现input只允许输入数字
这篇文章主要介绍了在HTML中限制input 输入框只能输入纯数字的实现,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
-
CSS的flex-direction属性是怎样控制布局的
flex-direction用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。指定了内部元素是如何在flex容器中布局的，定义了主轴的方向(正方向或反方向)。
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
