我的按钮不能在div中居中
要将按钮居中显示在一个div中，可以使用以下方法：
- 使用CSS的flexbox布局：
- 将div的样式设置为display: flex;，这将使其成为一个flex容器。
- 使用justify-content: center;和align-items: center;将按钮在容器中水平和垂直居中。
- 示例代码：
- 示例代码：
- 使用CSS的绝对定位：
- 将div的样式设置为position: relative;，这将使其成为一个相对定位的容器。
- 将按钮的样式设置为position: absolute;，这将使其相对于容器进行绝对定位。
- 使用top: 50%;和left: 50%;将按钮的顶部和左侧定位到容器的中心。
- 使用transform: translate(-50%, -50%);将按钮向左和向上移动自身宽度和高度的一半，以使其完全居中。
- 示例代码：
- 示例代码：
- 使用CSS的网格布局：
- 将div的样式设置为display: grid;，这将使其成为一个网格容器。
- 使用place-items: center;将按钮在容器中水平和垂直居中。
- 示例代码：
- 示例代码：
以上是三种常用的方法来实现按钮在div中的居中显示。根据具体情况选择适合的方法即可。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云CSS：https://cloud.tencent.com/product/css
- 腾讯云云服务器CVM：https://cloud.tencent.com/product/cvm
- 腾讯云云原生容器服务TKE：https://cloud.tencent.com/product/tke
- 腾讯云人工智能AI：https://cloud.tencent.com/product/ai
- 腾讯云物联网IoT Hub：https://cloud.tencent.com/product/iothub
- 腾讯云移动开发MPS：https://cloud.tencent.com/product/mps
- 腾讯云对象存储COS：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务TBC：https://cloud.tencent.com/product/tbc
- 腾讯云元宇宙：https://cloud.tencent.com/product/mu
相关·内容
2回答
我知道它已经被问了十几次了，但是我被困在我的代码中，我不明白为什么我的代码没有响应。 我想以一种响应式的方式居中我的按钮:它必须居中低于768px，并在上面有另一个反应。让它对齐不是问题，但不可能在屏幕缩小时将其居中。下面是我的代码： @media (m
浏览 35提问于2021-03-26得票数 0
3回答
我有一个区域，我想在里面添加两个按钮。左边的按钮是“星期天”，右边的按钮是“杂项”。我想要的是均匀地放置两个按钮。因为两个按钮具有相同的大小，所以我将它们分配给相同的类。代码： <div class="button" id=&q
浏览 1提问于2012-08-01得票数 1
回答已采纳
3回答
在桌子上方对中按钮
、、、
我对编码非常陌生，而且我很难把四个按钮/一个图像放在中间与我的桌子对齐。我试着把它对准中心但那不起作用..。以下是html： <center><a class="button" data-table="1" href
浏览 5提问于2014-03-13得票数 0
回答已采纳
我有一个可能是非常基本的问题，但我似乎就是想不出这个问题。如何在标记为"lit“的代码中将submit按钮居中。 <!>任何帮助都会得到极大的重视。
浏览 1提问于2015-12-04得票数 0
4回答
我在一个absolute定位的包装器中放置了这个fixed定位按钮。我想在包装器内对齐按钮，但要向右对齐。<div id="nav-container&quo
浏览 0提问于2015-05-17得票数 2
我有这个html： <img ... /></div>.object-box .caption, .object-box img {} border
浏览 1提问于2010-06-13得票数 25
回答已采纳
我希望最后的这两个<a>标记居中，但是直接在标记上声明.text-center类是不起作用的。我如何才能在不使用！重要的情况下强制居中呢？<div class="col-md-6 mb-4 text-center text-md-left"> <p class="display-4 font-weight-bold/a>
浏览 24提问于2020-12-06得票数 0
回答已采纳
2回答
我有一个用Bootstrap构建的iPhone应用程序。其中一个页面是在底部具有按钮的静态文本html页面。当静态文本对于屏幕来说太长时，当用户向上滚动页面以查看其余文本时，按钮将与文本一起向上滚动，而不是固定在屏幕底部。 <button class="btn btn-block n
浏览 5提问于2018-12-04得票数 0
2回答
我想要两个按钮，一个提交数据，另一个返回到其他页面，居中并彼此相邻。我可以居中，但不能在同一条线上。 <div id='main_body'>
<form action='' method="post">
浏览 2提问于2017-07-30得票数 2
我在做一个俯仰控制器： <div id="pitchWrapper"> <span id="pitchValue">0</span></div> 我希望减号，正号和音
浏览 167提问于2020-06-01得票数 0
回答已采纳
3回答
我尝试在<div>中居中显示社交媒体按钮，但它始终向左对齐。echo '<div class="socialWrapper">';
echo '<div class="fb-like" data-href=" ' .small" data-show-faces="true" data-share="true&q
浏览 0提问于2017-03-31得票数 0
我试图在表单中居中输入按钮，但通常的边距:0 auto；不起任何作用。下面是我的HTML的设置：<div class="container"> <form id="contact-form"
浏览 0提问于2015-10-11得票数 14
回答已采纳
1回答
我很难把输入和边界围绕在我创建的文本上。我试图用一个基于百分比的设置来调整它，这样它就变得更有响应性了。似乎百分比是关闭的，每次我翻过left: 35%;，它就不再移动。这同样适用于搜索输入中的“我的提交”按钮。我拿掉掉的百分比是因为它什么也没做。
但是，要想看到
浏览 0提问于2015-10-20得票数 0
回答已采纳
1回答
我读过很多文章，描述了如何将一个比div容器大的img居中。但我也需要水平滚动图像(特别是对于移动设备)，我无法解释我得到的行为以及如何修复它。我使用flex (通过bootstrap类)： <section id="container">
<div class="for-mobile d-md-none d-flex overflow-autojustify-content-c
浏览 15提问于2020-08-21得票数 0
3回答
我正在创建一个时钟程序，我一直想要将元素居中，但是当使用“边距:自动”选项时，计算机不能正确地处理它，只是表现得好像属性不在那里一样。rel="stylesheet" href="timeclock.css"></head>
<div<button type="b
浏览 67提问于2018-12-05得票数 -1
1回答
我试图在我的网站上居中放置div，但是什么都没有移动/改变。所有的东西都留在左边，即使现在我把所有的div都改成了居中。我检查了很多浏览器，但是所有的东西都在左边。什么是理由呢？
浏览 14提问于2020-03-25得票数 0
3回答
设置可变项目间距
、、
我有三个flex元素，在一个容器中，它们对齐到中心。如何在项目之间留出一定的间距？例如:第一个应该是容器左边的shoen，第二个应该在中间，第三个应该在右边。-- hero download --> <div id=&qu
浏览 4提问于2015-09-24得票数 0
16回答
我有一个宽度为100%的div。<div style="width:100%; height:100%; border: 1px solid"></div
浏览 4提问于2011-09-27得票数 262
回答已采纳
2回答
我已经阅读了所有的内容，但我不确定为什么我不能让按钮居中在顶部的图像。.page_wrap边距都是auto？我正在尝试让按钮在桌面浏览器和samsung Note3浏览器上居中body { }
oReq.se
浏览 1提问于2016-03-06得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
