开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用CSS使div中的3个按钮居中显示

要使一个div中的三个按钮居中显示，可以使用CSS的Flexbox布局。Flexbox是一种一维布局模型，非常适合用于居中对齐元素。

以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center Buttons in Div</title>
    <style>
        .container {
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            height: 100vh; /* 使容器占满整个视口高度 */
            border: 1px solid black; /* 可选：添加边框以便观察 */
        }
        .button {
            margin: 0 10px; /* 按钮之间的间距 */
        }
    </style>
</head>
<body>
    <div class="container">
        <button class="button">Button 1</button>
        <button class="button">Button 2</button>
        <button class="button">Button 3</button>
    </div>
</body>
</html>

解释

Flexbox布局：
- display: flex;：将容器设置为Flexbox容器。
- justify-content: center;：使子元素在主轴（水平方向）上居中对齐。
- align-items: center;：使子元素在交叉轴（垂直方向）上居中对齐。

容器高度：
- height: 100vh;：使容器占满整个视口高度，确保垂直居中效果明显。
按钮间距：
- margin: 0 10px;：为按钮添加左右间距，使它们之间有一定的间隔。

应用场景

这种布局方式适用于需要在页面中心显示一组元素的场景，例如登录页面、仪表盘、设置页面等。

参考链接

MDN Web Docs: Flexbox

通过这种方式，你可以轻松地将多个按钮居中显示在一个div中。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【前端】使用CSS使元素居中的几种方式

Precondition：居中方式一：使用transform .item {...position: relative; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); } 方式二：使用...flex .parent { display: -webkit-flex; justify-content: center; // 子元素水平居中 align-items: center...; // 子元素垂直居中 }

1623 0

html使用display:inline-block实现标签右对齐，值左对齐效果。和设置div宽度，并居中显示。嵌套div的里层div文字居中显示

要实现下图所示的效果：代码：可直接把代码拿到w3c网站测试 2，设置div宽度，并居中显示 div 元素的内容不会显示出来！... 显示结果：总结：使用标签前要了解此标签的属性有哪些，比如span标签没有width属性，所以即使设置了宽度也不会起作用，...3，嵌套div的里层div文字居中显示 <div align="center" style="display:inline-black; float:left; margin-top:50px;width

5.5K1 0

简易登录页面实现

CSS样式和布局接下来，我们为登录页面设置了一些样式和布局，使用了Flex布局来实现居中对齐等效果： /* 设置body的样式 */ body { font-family...该函数的作用是切换显示不同的登录选项内容，并给当前选中的按钮添加active类，同时移除其他按钮的active类。...在标签中，有一个.container类的元素，用于包含整个登录页面的内容。该具有一些样式，如设置最大宽度、居中对齐、背景色和阴影等。...页面的标题是一个标签，显示为"Login"，居中对齐。在.tab类的中，有三个登录选项的按钮，分别对应"Student"、“Teacher"和"Admin”。...总体来说，这段代码通过使用HTML和CSS实现了一个简单的登录页面，利用JavaScript实现了选项卡的切换和内容的显示和隐藏。用户可以选择不同的登录选项，并填写相应的用户名和密码进行登录。

2353 0

简易登录页面实现

CSS样式和布局接下来，我们为登录页面设置了一些样式和布局，使用了Flex布局来实现居中对齐等效果： /* 设置body的样式 */ body { font-family...该函数的作用是切换显示不同的登录选项内容，并给当前选中的按钮添加active类，同时移除其他按钮的active类。...在标签中，有一个.container类的元素，用于包含整个登录页面的内容。该具有一些样式，如设置最大宽度、居中对齐、背景色和阴影等。...页面的标题是一个标签，显示为"Login"，居中对齐。在.tab类的中，有三个登录选项的按钮，分别对应"Student"、“Teacher"和"Admin”。...总体来说，这段代码通过使用HTML和CSS实现了一个简单的登录页面，利用JavaScript实现了选项卡的切换和内容的显示和隐藏。用户可以选择不同的登录选项，并填写相应的用户名和密码进行登录。

2712 0

＜SpringMVC实践项目：【简易对话留言板（数据存在内存中）】＞

来逐一剖析我们之前没遇到过的语法吧。我们首先看文档的头部也就是head中的style。 style标签用于在 HTML 文档中定义内部 CSS 样式。...它可以让你在同一个 HTML 文件中编写样式规则，控制页面中元素的外观和布局。 CSS 规则：由选择器和声明块组成。...margin: 0 auto;：设置容器的上、下外边距为 0，左右居中对齐（即水平居中）。 text-align: center;：将容器内的文本内容居中对齐。...margin: 10px;：设置按钮外部的上下左右外边距为 10 像素。 border-radius: 5px;：设置按钮的圆角半径为 5 像素，使按钮有轻微的圆角效果。...+ ""; 这一行代码构建了一个 HTML 字符串，用于显示每条留言的内容。

1171 0

web前端开发初学者十问集锦（2）

例如浏览器会根据标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据标签的type属性来决定是显示输入框，还是单选按钮等...-- html代码 --> 8.margin:0 auto;无法使div水平居中再使元素进行居中的时候，我们要清楚需要居中的元素的类型，对症下药。...行内元素（inline element）：水平居中显示，我们需要为其父级元素设置text-align:center,一般这个属性是用于将文字水平居中的，我们的行内元素就相当于一行之内的文字了，所以可以使用这个方法...9.如何让浮动的div水平居中? 元素垂直居中：对于页面上的块级元素，我发现设置CSS样式margin:auto 0;或者vertical-align:middle;都没有效果。...当然，浮动的元素垂直居中也可以使用此方法，缺点就是多增加了一个wrapper。 10.CSS绝对定位之后为什么以浏览器窗口作为父元素呢?

1.4K1 0

【Java 进阶篇】深入了解 Bootstrap 全局 CSS 样式

text-left、text-center、text-right：用于文本的左对齐、居中对齐和右对齐。 text-muted：使文本显示为灰色，用于次要信息。... 这些样式使文本内容更容易阅读，同时提供了一些额外的视觉效果。链接和按钮样式链接和按钮是网页中的重要元素，Bootstrap 提供了一系列类，用于定义链接和按钮的样式。... 这些类可用于微调元素的边框和间距，使页面看起来更整洁。响应式设计 Bootstrap 的全局 CSS 样式还包括响应式设计，这意味着页面会根据不同设备的屏幕尺寸自动适应布局。... 这些响应式样式允许您根据不同设备上的屏幕尺寸自动调整元素的显示和排列方式，从而提供更好的用户体验。... 这个文本使用了自定义字体大小。这样，您可以根据项目需求轻松自定义全局 CSS 样式。

4752 0

＜SpringMVC实践项目：【简易对话留言板（数据存在数据库中）】＞

来逐一剖析我们之前没遇到过的语法吧。我们首先看文档的头部也就是head中的style。 style标签用于在 HTML 文档中定义内部 CSS 样式。...它可以让你在同一个 HTML 文件中编写样式规则，控制页面中元素的外观和布局。 CSS 规则：由选择器和声明块组成。...margin: 10px;：设置按钮外部的上下左右外边距为 10 像素。 border-radius: 5px;：设置按钮的圆角半径为 5 像素，使按钮有轻微的圆角效果。...for (var message of messages) { ... }：使用 for...of 循环遍历 messages 数组中的每条留言。...+ ""; 这一行代码构建了一个 HTML 字符串，用于显示每条留言的内容。

641 0

【CSS】课程网站头部制作 ⑤ ( 用户栏测量 | 用户栏代码编写 | 代码示例 )

; 导出的切片如下 : 二、用户栏代码编写 ---- 1、HTML 结构头像与名称单独放在一个 div 盒子中 , 这两个元素都要垂直居中对齐 , 分别需要单独设置 ; 头像垂直居中对齐..., 需要使用 padding 内边距的方式设置 ; 文字垂直居中对齐 , 需要使用内容高度 = 行高的方式设置 ; 核心代码 : <!...left; } /* 设置无序列表中的链接样式 */ .nav ul li a { /* 显示模式块级元素 */ display: block; /* 高度 40 像素 , 总高度 42 像素.../ } /* 鼠标经过链接时的样式 */ .nav ul li a:hover { /* 鼠标经过导航栏链接 , 底部显示 2 像素的 #00a4ff 颜色实线 */ border-bottom:...*/ .search button { /* 设置左浮动使其与表单在同一行显示 */ float: left; /* 按钮宽度 50 像素 */ width: 50px; /* 按钮高度

2.5K3 0

【移动端网页布局】流式布局案例 ③ ( 实现搜索栏功能 | 伪元素选择器 | 子绝父相 | 外边距塌陷处理 | 二倍精灵图处理方案 )

左 ( 顺时针方向 ) ; css 样式实例 : .search-btn::before { /* 在指定的标签元素内部的前面插入内容 */ /* 左侧按钮盒子中插入 JD 图片...内容高度 , 即可设置文字垂直居中 ; css 样式实例 : .search-login { /* 右侧按钮布局 */ /* 右侧按钮需要设置到左侧使用绝对定位进行设置 */...-- 中间搜索框中的放大镜图标 --> 登陆 2、CSS 样式本章节核心代码.../ /* 左侧按钮盒子中插入三图片 */ content: ""; /* 显示模式设置为块级元素 */ display: block; /* 盒子大小设置为

2K3 0

【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )

: .user::before { /* 使用伪元素方式插入用户栏头像图片 */ content: ""; /* 设置显示样式流式布局块级元素上方设置按钮会自动将文字挤到下面显示...*/ margin: 4px auto -2px; } 5、CSS3 中的垂直居中对齐 - 行高 = 内容高度 ( 总高度 - 边框高度 - 内边距高度 ) 普通盒子模型中 , 设置垂直居中对齐时...CSS3 中的垂直居中是在边框 + 内边距 + 尺寸的总高度中垂直居中 */ height: 26px; line-height: 24px; 完整代码示例 : .search {...设置行高 = 26 会偏下上面的设置高度不等于行高原因是这是 CSS3 模型 CSS3 中的垂直居中是在边框 + 内边距 + 尺寸的总高度中垂直居中...设置行高 = 26 会偏下上面的设置高度不等于行高原因是这是 CSS3 模型 CSS3 中的垂直居中是在边框 + 内边距 + 尺寸的总高度中垂直居中

3322 0

【CSS】课程网站 Banner 制作 ① ( Banner 栏测量 | Banner 盒子模型代码 | 代码示例 )

文章目录一、Banner 栏测量 1、盒子模型尺寸测量 2、背景测量切图二、Banner 盒子模型代码 1、HTML 标签结构 2、CSS 样式 3、显示效果一、Banner 栏测量 ----...中 , 点击 " 导出选中图层 " , 切图后的效果 : 二、Banner 盒子模型代码 ---- 1、HTML 标签结构 <!.../ body { background-color: #f3f5f7; } /* 版心宽度 1200 像素 , 在浏览器中居中对齐 */ .w { width: 1200px; margin...*/ float: left; } /* 设置无序列表中的链接样式 */ .nav ul li a { /* 显示模式块级元素 */ display: block; /* 高度 40 像素...*/ .search button { /* 设置左浮动使其与表单在同一行显示 */ float: left; /* 按钮宽度 50 像素 */ width: 50px; /* 按钮高度

3.9K2 0

【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

显示模式转换 | inline-block 改块元素为行内块元素示例 | 为块元素设置浮动 | 为块元素设置定位 ) 【CSS】使用固定定位实现顶部导航栏 ( 核心要点 | 固定定位元素居中设置..., 如下图所示 , 右侧的固定定位按钮 , 需要在浏览器中居中对齐 , 轮播图中的五个小圆点的容器需要居中对齐 ; 1、设置固定尺寸使绝对定位元素水平 / 垂直居中最简单的方法就是...使用标尺测量父容器的宽高 , 通过设置四个边的边偏移量 , 设置元素水平 / 垂直居中 ; 2、先偏移50%再回退固定值父容器盒子如果尺寸发生了改变 , 使用上述固定边偏移的方式设置的居中就会出现问题...class="one"> 显示效果 : 12、z-index...的显示模式修改为行内块显示模式的方法 : 使用 inline-block 可以改变显示模式 , 将元素的显示模式改为行内块显示模式 ; 使用浮动 , 也可以将块内元素改为类似于行内块的显示模式

1881 0

CSS布局解决方案（居中布局）

前端布局非常重要的一环就是页面框架的搭建，也是最基础的一环。在页面框架的搭建之中，又有居中布局、多列布局以及全局布局，今天我们就来总结总结前端干货中的CSS布局。...:left;还原 2）使用table+margin （1）原理、用法原理：先将子框设置为块级表格来显示（类似），再设置子框居中以达到水平居中。...缺点:transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀 4）使用flex+margin （1）原理、用法原理：通过CSS3中的布局利器flex将子框转换为flex...原理：通过将父框转化为一个表格单元格显示（类似和），再通过设置属性，使表格单元格内容垂直居中以达到垂直居中。...缺点:transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀 3）使用flex+align-items （1）原理、用法原理：通过设置CSS3中的布局利器flex中的属性

1.5K2 0

【移动端网页布局】流式布局案例 ⑤ ( 连续排列的链接图片 | 设置盒子圆角 | 超出部分隐藏 | 设置浮动布局 | 精确计算浮动元素宽度避免换行 | 设置图片宽度自适应 )

, 放置在单独的标签中 , 每个标签中放置一个链接标签 , 在链接标签中包裹一个图片 ; <img src=...插入内容 */ /* 左侧按钮盒子中插入三图片 */ content: ""; /* 显示模式设置为块级元素 */ display: block; /*

3.6K2 0

【移动端网页布局】流式布局案例 ④ ( Banner 栏制作 | 固定定位 | 标准流 | 百分比宽度设置 )

-- 左侧的列表按钮 --> 登陆 <!...插入内容 */ /* 左侧按钮盒子中插入三图片 */ content: ""; /* 显示模式设置为块级元素 */ display: block; /*

1.7K2 0

让div水平垂直居中的几种方法

前言导读利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。使用 CSS 实现水平居中很容易，但要实现垂直居中并不容易。而且有些方法在一些浏览器中无效。...下面我们看一下使对象垂直集中的几种不同方法，以及它们各自的优缺点。表格布局这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align 属性。...假借图片法这个方法把一些 div 的显示方式设置为inline-block，和图片一样，因此我们可以使用图片的 vertical-align 属性。...使用 margin:auto;使块级元素垂直居中是很简单的。...缺点： IE(IE8 beta)中无效无足够空间时，content 被截断，但是不会有滚动条出现如何让文本水平垂直居中 css居中属性

2.1K2 0

CSS3

引入方式 ➢ 内嵌式：CSS 写在style标签中，如上述方法 ➢ 行内式：CSS 写在标签的style属性中我是字体 ➢ 外联式：CSS 写在一个单独的....css文件中 ---- 选择器基础使用基础选择器在 HTML 中选择元素标签选择器。...与transform 这里需要记住的是transform中translate使用百分比时相对的是自己的长宽，不是父盒子的。...， line-height:500px 与子盒子的vertical-align:middel共同作用使子盒子垂直居中。...，父盒子有内容子盒子居中效果消失 */ } 浮动为什么使用浮动？

7729 0

【移动端网页布局】流式布局案例 ⑥ ( 多排按钮导航栏 | 设置浮动及宽度 | 设置图片样式 | 设置文本 )

一、多排按钮导航栏样式及核心要点 1、实现效果要实现下面的导航栏效果 ; 2、总体布局设计该导航栏可使用 10 个标签盒子进行制作 ; 该导航栏的宽度自动充满整个屏幕 , 宽度为...-- 左侧的列表按钮 --> 登陆 <img src=...插入内容 */ /* 左侧按钮盒子中插入三图片 */ content: ""; /* 显示模式设置为块级元素 */ display: block; /*

3.3K4 0

我想推荐一本书《CSS 世界》

如果按钮右对齐，我们还可以使用浮动 float:right 来解决，但是现在的关键问题是按钮是居中对齐的，说实话用 float 真的解决不了。...一番思考后，你发现没什么思路，是不是又会去求助万能的 JavaScript，根据设备改变按钮元素在 DOM 流中的顺序了？...普通块元素可以使用 margin:auto 实现垂直居中案例 ?...查看源码可以使用 text-align:center 实现图片垂直居中查看源码可以使用 text-indent 实现文字下沉效果查看源码在看着本书之前，我从来不知道 margin 能够实现垂直方向的合并...推荐理由二：第 10 章元素的显示与隐藏《CSS 世界》的第 10 章元素的显示与隐藏，看到元素的显示与隐藏，就想到了 display: none 和 visibility: hidden;她们的区别就是一个占据空间

1.4K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭