开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在Div中居中按钮，在其他居中文本下方

要在HTML的<div>元素中居中一个按钮，并且让它在其他居中文本的下方，可以使用CSS来实现。以下是一个简单的示例，展示了如何完成这个任务：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center Button Below Text</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <p class="center-text">居中的文本</p>
        <button class="center-button">按钮</button>
    </div>
</body>
</html>

CSS部分（styles.css）

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh; /* 使容器占满整个视口高度 */
}

.center-text {
    margin-bottom: 20px; /* 在文本和按钮之间添加一些间距 */
}

.center-button {
    padding: 10px 20px;
    font-size: 16px;
}

解释

HTML结构：
- 使用一个<div>元素作为容器，包含一个段落<p>和一个按钮<button>。
- 段落用于显示居中的文本，按钮则需要在文本下方居中显示。

CSS样式：
- .container类使用display: flex来创建一个弹性盒子布局，并设置flex-direction: column使子元素垂直排列。
- align-items: center和justify-content: center确保容器内的所有内容在水平和垂直方向上都居中。
- height: 100vh使容器的高度占满整个视口高度，确保内容始终居中显示。
- .center-text类添加了一个底部外边距margin-bottom，以便在文本和按钮之间留出一些空间。
- .center-button类设置了按钮的基本样式，如内边距和字体大小。

应用场景

这种布局方式适用于需要在页面中心显示一段文本和一个按钮的场景，例如登录页面、注册页面或任何需要引导用户进行操作的页面。

可能遇到的问题及解决方法

按钮和文本不对齐：确保.container的align-items和justify-content属性都设置为center。
按钮位置偏移：检查是否有其他CSS规则影响了按钮的位置，或者调整.center-text的margin-bottom值。
容器高度不足：如果页面内容较少，可能看不到居中的效果。确保.container的高度足够，可以使用height: 100vh来占满整个视口高度。

通过上述方法，可以轻松实现按钮在文本下方的居中显示，并且适用于多种常见的网页布局需求。

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

有帮助

没帮助

相关·内容

div在div中垂直居中水平居中(css如何让div水平居中)

最近写网页经常需要将div在屏幕中居中显示，遂记录下几个常用的方法，都比较简单。...水平居中直接加上标签即可，或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中（水平居中+垂直居中）的方法放上示范的html代码： div...class="main"> MAIN div> 方法一： div使用绝对布局，设置margin:auto;并设置top、left、right、bottom的值相等即可....main{ text-align: center; /*让div内部文字居中*/ background-color: #fff; border-radius: 20px; width: 300px...: absolute; top: 0; left: 0; right: 0; bottom: 0; } 效果如图：方法二：仍然是绝对布局，让left和top都是50%，这在水平方向上让div

15K2 0

img在div中上下左右居中

+ html 代码如下： div id="aa"> div> css： #aa{ display: flex; align-items:

2.3K1 0

在未知大小的父元素中设置居中

当提到在web设计中居中元素时。关于被居中的元素和它父元素的信息，你知道的越多就越容易设置。那么假如当你不知道任何信息？居中也是可设置的。...1) 在待居中元素外包裹table-cell，设置table-cell只是让table-cell中的元素在table-cell中居中。...2）table中在添加tr,td前要先添加tbody。 ---- 困难的：不知道子元素的宽高当你不知道待居中子元素的尺寸时，设置子元素居中就变得困难了。 ?...如果在div你需要定位其它内容或这些内容的行为不同于table-cell，那么只有god能帮你了。当然还有一个非常聪明并且可以实现相同目标的技巧。...最好的做法是在父元素中设置font-size:0 并在子元素中设置一个合理的font-size。

4K2 0

在 SwiftUI 中实现视图居中的若干种方法

欢迎大家在 Discord 频道[2] 中进行更多地交流将某个视图在父视图中居中显示是一个常见的需求，即使对于 SwiftUI 的初学者来说这也并非难事。...即使文本宽度超出了 HStack 给出的建议宽度，但 HStack 在布局时，仍会保留其最小厚度，导致下图上方的文本无法充分利用矩形视图的宽度。解决方法为：Spacer(minLength: 0)。...请阅读 SwiftUI 專欄 #4 Color 不只是顏色[3] ，掌握有关 Color 更多的内容对齐指南上节中，我们通过填充物让 Text 实现了左右居中。...上下居中则是利用了 HStack 对齐指南的默认设定（ .center ）实现的。本节中，我们将完全通过对齐指南来实现居中操作。...每周也会对当周博客上的新文章以及在 Twitter 上发布的 Tips 进行汇总，并通过邮件列表的形式发送给订阅者。订阅下方的邮件列表[10]，可以及时获得每周的 Tips 汇总。

6.8K4 0

文本、图片和按钮在Flutter中怎么用

而文本、图片和按钮，则是这些不同的UI框架中构建视图都要用到的三个最基本的控件。 Flutter中的文本Text和图片Image，我在前面的文章中都有过介绍，今天我们再来详细地聊一聊。...我们先来看看如何使用单一样式的文本 Text。单一样式文本Text的初始化，是需要传入要展示的字符串。而这个字符串的具体展示效果，受构造函数中的其他参数控制。...如下所示，我在代码中定义了一段居中布局、20号红色粗体展示样式的字符串： Text( "这是一段居中布局、20号红色粗体展示样式的文本", textAlign: TextAlign.center...面对这样的需求，在Android中，我们使用 SpannableString来实现；在iOS中，我们使用NSAttributedString来实现；而在Flutter中国也有类似的概念，即TextSpan...其中，通过TextStyle控制字符串的展示样式，其他参数控制文本布局，可以实现单一样式的文本展示；而通过TextSpan将字符串分割为若干片段，对每个片段单独设置样式后组装，可以实现支持混合样式的富文本展示

7.7K2 0

企业面试题：用css实现div在不同分辨率屏幕上下左右居中

企业面试题: 用css实现200*200的div在不同分辨率屏幕上下左右居中考核内容: css定位的使用题发散度: ★★ 试题难度: ★★ 解题思路: 不同屏幕下， 1，只能使用绝对定位 2，绝对定位标签是以左上角为起点

1.2K2 0

在 flex 布局中通过使用 margin 实现水平垂直居中以及其他常见的前端布局

flex-end：子元素在交叉轴的末端对齐。 center：子元素在交叉轴上垂直居中对齐。 baseline：子元素以其文本基线对齐。...在传统布局中，margin: auto; 主要用于水平居中对齐，不适用于垂直居中。因为普通流布局的垂直方向是由文档流控制的，不支持类似 Flexbox 中的自动调整行为。...2.2 实现更多实际开发中的布局示例 1：实现子元素部分集中在实际开发中，我们常遇到这样一种需求：将元素水平分布在容器内，其中某些元素需要靠近在一起，与其他元素保持一定的自适应距离。...示例 2：实现等宽子项的平均分布在很多情况下，我们需要将商品卡片或其他内容等宽地分布在每一行中，使每个子项都具有相同的宽度并且平均分布，每一行都是从左到右。...使用 space-around 时如果最后一行的元素数量不满，元素会在行中均匀分布，导致它们集中在中间，而不是靠左或对齐其他行。大家在遇到这些情况时是不是就在考虑换用 grid 布局了呢？

1681 0

【CSS】课程网站 Banner 制作 ③ ( Banner 栏右侧课程盒子测量及样式 | Banner 版心盒子模型右侧课程栏代码示例 )

文章目录一、Banner 栏右侧课程盒子测量及样式 1、盒子尺寸测量 2、课程表头部样式 3、列表样式 4、最下方按钮样式二、Banner 版心盒子模型右侧课程栏代码示例 1、HTML 标签结构...*/ margin-top: 10px; } 列表项中的三种文本 , 样式如下 : /* Banner 条右侧课程表无序列表列表项继续学习文本样式 */ .course-bd li .span1...: 12px; color: #a5a5a5; } 4、最下方按钮样式最下方按钮 200 x 40 像素 , 文字 16 像素 , 边框 1 像素实线 , 垂直居中 , 水平居中 ; 样式如下...-- 底部的全部课程按钮 --> 全部课程 div> div> div> div> 在浏览器中居中对齐 */ .w { width: 1200px; margin: auto; } /* 头部盒子样式 */ .header { /* 高度 42

3.6K6 0

【CSS】课程网站网格商品展示模块制作 ① ( 网格商品展示模块盒子模型测量及样式 | 顶部文本标题盒子测量及样式 | 代码示例 )

标题盒子判定 , 上面的标题 , 可以将其设置为垂直居中的样式 , 垂直居中 , 需要行高 = 内容高度 , 这里精确的测量 " 精品推荐 " 文本的行高与内容高度 ; 该文本盒子如下图所示 ,...文本内容 20 像素 , 文本上面和下面各有 20 像素的空白 ; 行高直接设置为 60 像素 , 文本内容页设置成 60 像素 ; /* 文本部分设置垂直居中 */ .box-hd { /* 内容高度...-- 底部的全部课程按钮 --> 全部课程 div> div> div> div> 在浏览器中居中对齐 */ .w { width: 1200px; margin: auto; } /* 头部盒子样式 */ .header { /* 高度 42...这是所有的文本样式课程在链接里面由 a 标签设置样式除 a 标签外只剩下竖线的样式*/ .goods-item { float: left; color: #bfbfbf

4.3K4 0

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

盒子中 , 这两个元素都要垂直居中对齐 , 分别需要单独设置 ; 头像垂直居中对齐 , 需要使用 padding 内边距的方式设置 ; 文字垂直居中对齐 , 需要使用内容高度 = 行高的方式设置...-- 文本输入框表单 --> div> 在浏览器中居中对齐 */ .w { width: 1200px; margin: auto; } /* 头部盒子样式 */ .header { /* 高度 42...*/ line-height: 40px; /* 字体大小 */ font-size: 18px; /* 字体颜色 */ color: #050505; /* 取消链接下方的横线 */...20 像素内边距 */ padding-left: 20px; /* 设置文本颜色 */ color: #bfbfbf; } /* 搜索框按钮 */ .search button { /*

2.5K3 0

【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )

-- 文本输入框表单 --> div> 在浏览器中居中对齐 */ .w { width: 1200px; margin: auto; } /* 头部盒子样式 */ .header { /* 高度 42...底部显示 2 像素的 #00a4ff 颜色实线 */ border-bottom: 2px solid #00a4ff; } /* 搜索栏盒子模型 */ .search { /* 设置左浮动排列在...20 像素内边距 */ padding-left: 20px; /* 设置文本颜色 */ color: #bfbfbf; } /* 搜索框按钮 */ .search button { /*...设置左浮动使其与表单在同一行显示 */ float: left; /* 按钮宽度 50 像素 */ width: 50px; /* 按钮高度 40 像素但是为了与父容器匹配这里拉伸到 42

3.3K5 0

【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )

; /* 版心宽度 1200 像素 , 在浏览器中居中对齐 */ .w { width: 1200px; margin: auto; } 该盒子大小为 1200x60 像素 ,...该大盒子 , 可以分为如下三个小盒子 , 小盒子中的元素都是垂直居中的 , 可以在大盒子中设置一个行高 , 小盒子自动继承 ; font-xxx , line-xxx , text-xxx , color...会自动垂直居中 , 文本大小为 16 像素 , 颜色为 #050505 ; 最终样式为 : /* 设置竖线和课程名称所在盒子的文本颜色这是所有的文本样式课程在链接里面由 a...-- 底部的全部课程按钮 --> 全部课程 div> div> div> div> 在浏览器中居中对齐 */ .w { width: 1200px; margin: auto; } /* 头部盒子样式 */ .header { /* 高度 42

5.2K3 0

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

Cutterman 中 , 点击 " 导出选中图层 " , 切图后的效果 : 二、Banner 盒子模型代码 ---- 1、HTML 标签结构文本输入框表单 --> div> 在浏览器中居中对齐 */ .w { width: 1200px; margin: auto; } /* 头部盒子样式 */ .header { /* 高度 42...*/ line-height: 40px; /* 字体大小 */ font-size: 18px; /* 字体颜色 */ color: #050505; /* 取消链接下方的横线 */...20 像素内边距 */ padding-left: 20px; /* 设置文本颜色 */ color: #bfbfbf; } /* 搜索框按钮 */ .search button { /*

3.9K2 0

【CSS】课程网站网页底部开发 ( 网页底部盒子模型测量及样式 | 代码示例 )

大盒子背景白色 */ background-color: #fff; } 3、版心盒子版心盒子不需要进行特殊设置 , 只需要将之前定义的版心样式设置给改盒子即可 ; /* 版心宽度 1200 像素 , 在浏览器中居中对齐...*/ .w { width: 1200px; margin: auto; } 4、版权盒子整个版权盒子在版心盒子中 , 设置左浮动 ; /* 版权所在盒子左浮动 */ .copyright...float: right; } /* dl 列表设置在链接盒子中左浮动 */ .links dl { float: left; /* 距离左侧 100 像素 */ margin-left:...1200 像素 , 在浏览器中居中对齐 */ .w { width: 1200px; margin: auto; } /* 头部盒子样式 */ .header { /* 高度 42...ul 列表中每个列表项样式 */ .box-bd li { /* 设置左浮动让列表项在一行中从左到右排列 */ float: left; /* 设置尺寸 228 x 270 */ width:

4.2K3 0

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

margin: 0 auto;：设置容器的上、下外边距为 0，左右居中对齐（即水平居中）。 text-align: center;：将容器内的文本内容居中对齐。...align-items: center;：在交叉轴（垂直）方向上，元素垂直居中对齐。...font-size: 20px;：设置按钮的文本大小为 20 像素。...它本身并没有特定的语义，仅用于将页面中的内容划分为逻辑部分，是网页布局和样式控制的基础元素。这段代码实现了一个简单的留言板界面，用户可以输入信息并提交，提交的信息将会显示在页面的下方。...：这是一个描述文本，带有 grey 类，提示用户在输入后点击“提交”按钮，会将信息显示在下方空白处。

1301 0

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

一、Banner 栏样式及核心要点 1、实现效果在上一篇博客中 , 实现了搜索栏 , 在本篇博客开始实现搜索栏下方的 Banner 栏 ; 2、核心要点分析 Banner 栏需要在搜索栏的下方...-- 搜索栏下方的主要内容 --> div class="main-content"> 中的放大镜图标 --> div class="sou">div> div> 下方的主要内容 --> div class="main-content"> <!...*/ height: 45px; line-height: 45px; /* 设置总体背景 */ background-color: #333333; /* 文本水平居中

1.7K2 0

【CSS】浮动 ⑤ ( 浮动布局案例 - 导航栏模块 | 核心要点说明 | 网页默认样式 | 盒子模型居中显示 | 设置渐变背景 | 设置列表浮动 | 设置文本水平垂直居中 | 设置链接文本样式 )

文章目录一、案例效果二、核心要点说明 1、网页默认样式 2、盒子模型居中显示 3、设置渐变背景 4、设置列表浮动 5、设置文本水平垂直居中 6、设置链接文本样式 7、设置鼠标经过的样式三、完整代码示例...盒子模型居中显示 : 此处涉及到了顶部的 Banner 图片 , 和下方的导航栏需要居中显示 , 设置 margin: auto; 和 margin: 0 auto; 都可以实现该效果 ;...设置了列表项浮动 , 就可以变为行内块元素 , 在一行中水平排列 ; .nav ul li { /* 设置无序列表项浮动这样就可以变为行内块元素显示样式 */ float: left...; } 如果一行排满则自动换行 , 通过精密计算 , 可以实现网格样式的排列 ; 5、设置文本水平垂直居中设置 text-align: center; 样式 , 可以使文本水平居中 ; 设置行高...*/ line-height: 32px; /* 水平居中 */ text-align: center; /* 设置按钮背景 */ background:

2.4K2 0

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

margin: 0 auto;：设置容器的上、下外边距为 0，左右居中对齐（即水平居中）。 text-align: center;：将容器内的文本内容居中对齐。...align-items: center;：在交叉轴（垂直）方向上，元素垂直居中对齐。...font-size: 20px;：设置按钮的文本大小为 20 像素。...它本身并没有特定的语义，仅用于将页面中的内容划分为逻辑部分，是网页布局和样式控制的基础元素。这段代码实现了一个简单的留言板界面，用户可以输入信息并提交，提交的信息将会显示在页面的下方。...：这是一个描述文本，带有 grey 类，提示用户在输入后点击“提交”按钮，会将信息显示在下方空白处。

741 0

【CSS】课程网站头部制作 ④ ( 搜索栏按钮测量 | 搜索栏按钮代码编写 | 代码示例 )

-- 文本输入框表单 --> div> 完整代码 : 文本输入框表单 --> div> div> 中 , 与 Input 表单放置在一行 , 并且二者之间没有缝隙 , 默认的行内块元素之间会有一条无法控制的缝隙 ; 最后 , 设置按钮图片 , 按钮图片无法填充满 , 使用平铺样式 ,...*/ img { width: 100%; } /* 版心宽度 1200 像素 , 在浏览器中居中对齐 */ .w { width: 1200px; margin: auto; }...*/ line-height: 40px; /* 字体大小 */ font-size: 18px; /* 字体颜色 */ color: #050505; /* 取消链接下方的横线 */

2.3K7 0

【CSS】课程网站头部制作 ③ ( 搜索栏表单测量 | 搜索栏表单代码编写 | 代码示例 )

---- 1、左侧边界搜索栏 , 大概结构如下 , 左侧是个文本框 , 右侧是个按钮 ; 导航栏文本有 10 像素内边距 , 20 像素外边距 , 文本输入框表单 , 距离导航栏外边距有..., 吸取边框的颜色值 , 为 #00a4ff ; 3、文本输入框表单提示文本测量使用横排文字工具 , 点击表单中的提示文本 , 该文本大小 14 像素 , 颜色值 #bfbfbf ;...提示文本在 Input 表单中的 value 属性中设置 ; 提示文本左侧距离边框有 20 像素 , 这里可以设置 20 像素的内边距 ; 注意 : 设置内边距会拉长盒子 , 盒子的尺寸要减去内边距...-- 文本输入框表单 --> div> div> <!...设置总体背景 */ body { background-color: #f3f5f7; } /* 插入图片自适应 */ img { width: 100%; } /* 版心宽度 1200 像素 , 在浏览器中居中对齐

1.9K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭